Question

我有3个下拉列表，都从数组中获取值。我希望在第一个框发生变化时更改第二个和第三个下拉列表的选择。

即。

<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>

如果在第一个框中选择选项3，则将第二个和第三个框更改为选项3

这是我到目前为止的代码

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

更新：

对不起，我应该提到第2和第3个值会有所不同，我只是使用选项1,2,3作为示例。 SORRY。

这是我的实际选择框代码

<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>

Answer 1

使用更改事件选择当前值并设置为其他值

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

DEMO

如果下拉值与其他值不同，则必须使用当前所选选项的索引

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

DEMO

如果您只需要2下拉来了解ID

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

Answer 2

您需要先在HTML中添加一些值，这样您就会有以下内容：

<强> 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示例： http://jsfiddle.net/7q4ct/

Answer 3

尝试

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

Answer 4

您正在寻找所谓的链式选择。这是一个php / ajax版本：

Chained Select Boxes (Country, State, City)

Answer 5

你必须尝试类似下面的东西，但是当你从冷杉下拉中选择一个项目时尝试动态追加

$('#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));
    });
});

Answer 6

请查看Cascading Dropdown 用例子

    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/ 希望这会有所帮助...

Answer 7

试试这个

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

小提琴：http://jsfiddle.net/eLtNG/

Answer 8

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

根据第一个下拉列表选择更改下拉列表

8 个答案:

DEMO

DEMO