Help display 2nd Dropdown list when selection is made (from first dropdown list)

[chrisj]

I am trying to modify a existing web script’s Upload Form where, currently you choose a Category…etc. and Submit. When a Category is chosen, I’d like another dropdown list of choices to display. Here is the code currently:

 <div class="form-group">
    <label class="col-md-12" for="category_id">{{LANG category}}</label>
    <div class="col-md-12">
    <select name="category_id" id="category_id" class="form-control">
    <?php foreach($pt->categories as $key => $category) {?>
    <option value="<?php echo $key?>"><?php echo $category?></option>
    <?php } ?>
    </select>
    </div>
    </div>

Any guidance/assistance with this appreciated.

[ErnieAlex]

Well, there are two ways to do this. I should say two common ways. The first is just to post the form and load the second select using the value posted from the first. You can set up a Javascript ONCHANGE option for the first select and have it force a reload of the page with the second select using a query built from the first select. Or, you can use Javascript and AJAX to load the data dynamically. This would require a second file that would load data using the first select’s input.

There are benefits to either way. The first is easier to follow. The second makes the display more dynamic visually. Both work well. Select one of these and we can walk you thru it. For the first one, Post the form to the same page and when it loads, check the posted first select and load the second accordingly. To get a posted first selection, you will need to post the form on changes made to it. Like:

<select name='dropdown1' onchange='this.form.submit()'>

And, where you display the second dropdown, get the value from the posted page. Check if the value of the first select is posted like if (isset($_POST[“category_id”])) and get that value like this:

<?PHP 
  if (isset($_POST["category_id"])) {
      $select_value = filter_input(INPUT_POST, "category_id");
      ...  Now you have the value of drop-down 1, use it to load the data for #2
  }

The data for drop-down two would need to be either in a database or text file so you can load it. Or, you can create an array of data for the drop-down-2 and pull out the needed data for based on #1.

Hope that make sense and helps you !

[thinsoldier]

If it’s not too much data you can build secondary selects for every option in the first select and just show/activate the one related to the option that was chosen.

[chrisj]

Many thanks for your replies.
I have tried this with some success:

<select name="test1" id="test1">
   <option value="Select">Select</option>
   <option value="a">a</option>
   <option value="b">b</option>
</select>
<select id="test2" name="test2">
<option value="Select">Select</option>
   <option class="a" value="a">a</option>
   <option class="a" value="b">b</option>
   <option class="a" value="c">c</option>
   <option class="b" value="1">1</option>
   <option class="b" value="2">2</option>
   <option class="b" value="3">3</option>
 </select>

select option[disabled] {
display: none;
}

jQuery(document).ready(function($){
$(’#test1’).on(‘change’, function(e){
var className = e.target.value;
$(’#test2 option’).prop(‘disabled’, true);
$(’#test2’).find(‘option.’ + className).prop(‘disabled’, false);
});
});

[code]

Ultimately, I’m trying to learn/add a second dropdown to an existing web script’s inital dropdown. Which shows this in the Form:

<div class="form-group">
<label class="col-md-12" for="category_id">{{LANG category}}</label>
<div class="col-md-12">
<select name="category_id" id="category_id" class="form-control">
<?php foreach($pt->categories as $key => $category) {?>
<option value="<?php echo $key?>"><?php echo $category?></option>
<?php } ?>
</select>
</div>
</div>

So, to begin, I’m trying to add an option of the secondary dropdown. So maybe something like:

<select name="category_id" id="category_id" class="form-control">
<?php foreach($pt->categories as $key => $category) {?>
<option value="<?php echo $key?>"><?php echo $category?></option>
<option value="<?php echo $key?>"><?php echo $category2?></option>
</select>
<div class="form-group">
<label class="col-md-12" for="category_id">{{LANG category2}}</label>
<div class="col-md-12">
<select id="category2" name="category2">
<option value="<?php echo $key?>"><?php echo $category2?></option>
<option value="<?php echo $key?>"><?php echo $category2?></option>
<option value="<?php echo $key?>"><?php echo $category2?></option>
<?php } ?>

I look forward to being further enlightened. Much thanks again.