Change a drop down list depending on first drop down list selection

Question

I have 3 drop down lists, all get there values from an array. I would like to change the selection of the second and third drop down lists when the first box has changed.

i.e.

<select id="first_box">
  <option> options 1</option>
  <option> options 2</option>
  <option> options 3</option>
</select>

<select id="second_box">
  <option> options 1</option>
  <option> options 2</option>
  <option> options 3</option>
</select>

<select id="third_box">
  <option> options 1</option>
  <option> options 2</option>
  <option> options 3</option>
</select>

If you select option 3 in the first box, then change the second and third boxes to option 3

Here's the code I have so far

jQuery(document).ready(function($){
    $('#font-name').change(function($){
        alert('first box has been changed');
    });
});

UPDATE:

Sorry I should of mentioned that the 2nd and 3rd values would be different, I just used the option 1,2, 3 as an example. SORRY.

Here's my actual selection box code

<select id="font-name" name="layout_options[h1_font_name]">
    <?php foreach( $fonts as $key => $font ): ?>
        <option <?php if($key == $current) echo "SELECTED"; ?> value="<?php echo $key; ?>"><?php echo $font['name']; ?></option>
    <?php endforeach; ?>
    </select>

    <select id="font-font" name="layout_options[h1_font_font]">
    <?php foreach( $fonts as $key => $font ): ?>
        <option <?php if($key == $current) echo "SELECTED"; ?> value="<?php echo $font['font']; ?>"><?php echo $font['font']; ?></option>
    <?php endforeach; ?>
    </select>

    <select id="font-css" name="layout_options[h1_font_css]">
    <?php foreach( $fonts as $key => $font ): ?>
        <option <?php if($key == $current) echo "SELECTED"; ?> value="<?php echo $font['css']; ?>"><?php echo $font['css']; ?></option>
    <?php endforeach; ?>
    </select>

Hey Dan, I am wondering what you ready need. Do you need to just change the value for second and third box, or create a whole new select box ? (second and third) — John Skoumbourdis, Jul 14 '14 at 10:04
Hi John, I just need to change what's selected on the second and third boxes although I mentioned in your answer that the 2nd and 3rd option values are different. — Dan, Jul 14 '14 at 10:20

Balachandran · Accepted Answer · 2014-07-14T10:23:41.353

3

Use change event to select the current value and set to other one

$('#first_box').change(function(){
    $("select").not(this).val(this.value);
});

DEMO

IF the drop down values are diff from other then You have to use index for current selected option

$('#first_box').change(function () {
    $("select").not(this).find('option:nth-child(' + ($(this).find('option:selected').index() + 1) + ')').prop('selected', true);
});

DEMO

If you need only 2 drop down for knowing ID

$('#first_box').change(function () {
    $("#second_box,#third_box").find('option:nth-child(' + ($(this).find('option:selected').index() + 1) + ')').prop('selected', true);
});

edited Jul 14 '14 at 10:23

answered Jul 14 '14 at 09:47

Balachandran

9,567
1
16
26

The second option works the best, I should of stated that my values were going to be different on the second and third boxes but your second example works. I do have 1 issue with it though, it seems to be changing other drop down menus on my page, I only want 2 to change – Dan Jul 14 '14 at 10:16
I updated for 2 dropdown only .. if you knew id you can use directly – Balachandran Jul 14 '14 at 10:20
Hi Bala, i've just updated the original post with my selection box code, this will give the id – Dan Jul 14 '14 at 10:23

John Skoumbourdis · Answer 2 · 2014-07-14T10:02:57.317

3

You will need to first add some values to your HTML, so you will have something like this:

HTML:

<select id="first_box">
  <option value="">-- Please select a value --</option>
  <option value="option1">options 1</option>
  <option value="option2">options 2</option>
  <option value="option3">options 3</option>
</select>

<select id="second_box">
  <option value="">-- Please select a value --</option>
  <option value="option1">options 1</option>
  <option value="option2">options 2</option>
  <option value="option3">options 3</option>
</select>

<select id="third_box">
  <option value="">-- Please select a value --</option>
  <option value="option1">options 1</option>
  <option value="option2">options 2</option>
  <option value="option3">options 3</option>
</select>

Javascript:

jQuery(function($){
    $('#first_box').change(function () {
        var first_box_value = $(this).val();
        $('#second_box').val(first_box_value);
        $('#third_box').val(first_box_value);
    });
});

JSfiddle example: http://jsfiddle.net/7q4ct/

edited Jul 14 '14 at 10:02

answered Jul 14 '14 at 09:48

John Skoumbourdis

3,041
28
34

If the text inside the option tag is as same as its value then we can ignore adding value attribute to it.. – Balachandran Jul 14 '14 at 09:57
@Bala I agree with you. However is a good practice to have it. I am an "old fashion" web developer and I've seen many issues with the value for internet explorer 6 and 7, so just to make sure I am always advising people to have values at their options. – John Skoumbourdis Jul 14 '14 at 10:01
I should of stated that the 2nd and 3rd option boxes would have different values, Bala's 2nd example worked although it changed other drop down lists as well. – Dan Jul 14 '14 at 10:17

score 0 · Answer 3 · answered Jul 14 '14 at 09:45

0

Try

jQuery(document).ready(function($){
$('#first_box').change(function($){
    var SelectVal=$(this).val();
    $('#second_box,#third_box').val(SelectVal);
});

answered Jul 14 '14 at 09:45

Confused

1,602
15
25

score 0 · Answer 4 · edited May 23 '17 at 10:32

0

You're looking for what's called a chained select. Here's a php/ajax version:

Chained Select Boxes (Country, State, City)

edited May 23 '17 at 10:32

Community

1
1

answered Jul 14 '14 at 09:46

James

834
7
27

score 0 · Answer 5 · answered Jul 14 '14 at 09:46

you have to try something like below i.e try to append dynamically when ever you select ay item from firs drop down

$('#ddl1').change(function () {
    //empty lists 2 and 3
    $('#ddl2').html("");
    $('#ddl3').html("");

    var option_selected = $('option:selected', this).val();

    //populate ddl2
    $.each(data[option_selected]['Cities'], function (index, element) {
        $('#ddl2').append($('<option>', {
            value: element
        }).text(element));
    });

    //populate ddl3
    $.each(data[option_selected]['States'], function (index, element) {
        $('#ddl3').append($('<option>', {

            value: element
        }).text(element));
    });
});

score 0 · Answer 6 · edited May 23 '17 at 12:26

Please look at the Cascading Dropdown With example

    var drop2 = $("select[name=drop2] option"); // the collection of initial options
$("select[name=drop1]").change(function(){
    var drop1selected = parseInt(this.value); //get drop1 's selected value
    $("select[name=drop2]")
                     .html(drop2) //reset dropdown list
                     .find('option').filter(function(){
                        return parseInt(this.value) < drop1selected; //get all option with value < drop1's selected value
                      }).remove();  // remove
});

http://jsfiddle.net/HTEkw/ Hope this helps...

score 0 · Answer 7 · answered Jul 14 '14 at 09:57

Try this

$(document).ready(function()
     {
        $("#first_box").change(function()
              {
                  var sel = $(this).val();
                 $("#second_box").val(sel);
                  $("#third_box").val(sel);
              });                      
     });

Fiddle: http://jsfiddle.net/eLtNG/

score -1 · Answer 8 · answered Jul 14 '14 at 09:49

-1

$('#first_box').change(function($){
    if($('#first_box').val()=='option 3'){
        $('#second_box, #third_box').val('option 3');
    }
});

answered Jul 14 '14 at 09:49

salah9

502
1
10
21

Change a drop down list depending on first drop down list selection

8 Answers8

DEMO

DEMO