Question

我的问题是我有2个下拉菜单，我想用第一个值更改第二个下拉列表。例如：如果用户选择＆＃34; Apple＆＃34;在第一次下拉第二次下拉时应该立即获得＆＃34; iPhone＆＃34;和＆＃34; iPad＆＃34;选项。如果客户改变主意并选择＆＃34; Microsoft＆＃34; ＆＃34; iPhone＆＃34;和＆＃34; iPad＆＃34;值应该被删除而不是它们应该出现＆＃34; Windows＆＃34;和＆＃34;办公室＆＃34;。我怎样才能使它工作？感谢。

HTML：

<select name="brand" id="brand" onChange="populateSecond(this.value);">
    <option value="">----------------</option>
    <option value="1">Apple</option>
    <option value="2">Microsoft</option>
</select>
<select id="model">
    <option value="">----------------</option>
</select>

jQuery的：

$(document).ready(function() {
    $("#brand").change(function(populateSecond(id)) {

            if(id == 1){
                $('select[id=model]').append('<option value="a">iPhone</option>');   
                $('select[id=model]').append('<option value="a">iPad</option>');
            }if(id == 2){
                $('select[id=model]').append('<option value="b">Windows</option>');    
                $('select[id=model]').append('<option value="b">Office</option>'); 
            }
    });
});

问题：http://jsfiddle.net/w6E88/6/

Answer 1

从html中删除onChange并按照这样做！你已经在使用Jquery onchange了如果你需要从中选择的值，也不需要为你的HTML提供onChange您可以直接使用this.value获取第一个下拉列表并对第二个下拉列表进行必要的更改。

<强> HTML

＆＃13;

<select name="brand" id="brand">
    <option value="">----------------</option>
    <option value="1">Apple</option>
    <option value="2">Microsoft</option>
</select>
<select id="model">
    <option value="">----------------</option>
</select>

＆＃13;

<强> JQUERY

$(document).ready(function() {
$("#brand").change(function() {

       var id=this.value;
        if(id == 1){
             $('#model').html("");
            $('#model').append('<option value="a">iPhone</option>');   
            $('#model').append('<option value="a">iPad</option>');
        }else if(id == 2){
            $('#model').html("");
            $('#model').append('<option value="b">Windows</option>');    
            $('#model').append('<option value="b">Office</option>'); 
        }
        else{
         $('#model').html("");
         $('#model').append('<option value="">----------------</option>')
        }
});
});

Answer 2

您的HTML代码中已经有onChange="populateSecond(this.value);"，也不需要JS中的.change。

您可以在第一次调用函数之前完全定义函数populateSecond;或仅使用jQuery方法。我只在这里给出jQuery结果：

$(document).ready(function () {
    $("#brand").on('change', function (id) {
        if (id == 1) {
            $('select[id=model]').append('<option value="a">iPhone</option>');
            $('select[id=model]').append('<option value="a">iPad</option>');
        } else {
            $('select[id=model]').append('<option value="b">Windows</option>');
            $('select[id=model]').append('<option value="b">Office</option>');
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="brand" id="brand">
    <option value="">----------------</option>
    <option value="1">Apple</option>
    <option value="2">Microsoft</option>
</select>
<select id="model">
    <option value="">----------------</option>
</select>

PS ：我更喜欢使用.on('change', handler)方法而不是.change。

Answer 3

这是结构化的方式。

    var childData = {
        apple: ["iPhone", "iPad"]  ,
        ms: ["Windows", "Office"]
    };
    $("#brand").change(function () {
        var newData = childData[this.value];
        var element = $("#model").empty();

        element.append('<option>----------------</option>');
        $.each(newData, function(i, val) {
            element.append('<option value='+i+'>'+val+'</option>');
        });

    });

检查这个小提琴：http://jsfiddle.net/soundar24/w6E88/11/

Answer 4

这是另一种实现所需功能的jQuery方法（注释解释）

添加了bootstrap类来选择外观元素。

<强> HTML

<select id="mainCategorySelect" name="mainCategorySelect" class="form-control">
    <option>Select category</option>
</select>

<select id="subCategorySelect" name="subCategorySelect" class="form-control"></select>

<强> JS

// Wait for the dom to be ready
$(function () {

    // For the sake of this example our business and products are arrays
    var businesses = ["Microsoft","Apple"],
        msProducts = ["Microsoft Phone","Microsoft Office","Microsoft Windows 10"],
        appleProducts = ["Apple iPhone","Apple iPad","Apple iPod","Apple iSomething"],

        // Declare variables for the select elements
        mainCategorySelect = $('#mainCategorySelect'),
        subCategorySelect = $('#subCategorySelect');

    // Iterate thorugh businesses and populate the main select element
    for (var i = 0; i < businesses.length; i++) {
        mainCategorySelect.append("<option value='"+businesses[i]+"'>"+businesses[i]+"</option>");
    }

    // using jQuery .on('change')
    mainCategorySelect.on('change', function() {
        // Always clear the sub category select when main select element value is changed
        subCategorySelect.empty();
        // Retrieve the value of the main select element
        var business = $(this).val();
        // if else statement to deside which products to list in the sub category select element
        if (business == "Microsoft") {
            // if Microsoft then iterate through the msProducts array and append the values as option elements to the sub category select element
            for (var i = 0; i < msProducts.length; i++) {
                subCategorySelect.append("<option value='"+msProducts[i]+"'>"+msProducts[i]+"</option>");
            }
        } else if(business == "Apple") {
            // if Apple then iterate through the appleProducts array and append the values as option elements to the sub category select element
            for (var i = 0; i < appleProducts.length; i++) {
                subCategorySelect.append("<option value='"+appleProducts[i]+"'>"+appleProducts[i]+"</option>");
            }
        }
        // When the user changes the value of the sub category select element the do something with it
        subCategorySelect.on('change', function() {
            alert($(this).val());
        });
    });
});

这是一个工作小提琴：http://jsfiddle.net/kagLhpka/

如何更改jQuery的下拉菜单属性？

4 个答案: