Question

这是我正在尝试做的事情：您打开页面，然后出现一个选择框，您可以在其中选择选项A，另一个选择框，选项B，并显示选项，具体取决于用户为A选择的选项。

我设法得到了一点帮助，但我想自定义选择框，我唯一能找到支持onchange回调的方法就是实现jQueryUI。我可以让它出现选项B，但它不会改变选项。

这是我到目前为止的（非常混乱的）代码：

  <head>
    <meta content='text/html; charset=utf-8' http-equiv='content-type' />
    <title>Jailbreak</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <link href="scripts/reset.css" rel="stylesheet" type="text/css" />
    <link href="scripts/styles.css" rel="stylesheet" type="text/css" />
    <link rel="Stylesheet" href="scripts/jquery-ui.css" type="text/css">
    <link rel="Stylesheet" href="scripts/ui.css" type="text/css">
    <script type="text/javascript" src="scripts/jquery-ui.js"></script>
    <script type="text/javascript" src="scripts/ui.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("select[name='select1']").selectmenu();
        $("select[name='select2']").selectmenu();   
    });
    </script>
</head>
<body>
<script>
function Select1(){
    var phoneselect=document.getElementById("select1");
    var phoneid = phoneselect.options[phoneselect.selectedIndex].value;
    if( phoneid == 'p1' ){
    document.getElementById( 'select2' ).length=0;
    document.getElementById( 'select2' )[0]=new Option("1.1", "1.1", true, false);
    document.getElementById( 'select2' )[1]=new Option("1.2", "1.2", false, false);
    document.getElementById( 'select2' )[2]=new Option("1.3", "1.3", false, false);
    }
    else if(phoneid == 'p2' ){
    document.getElementById( 'select2' ).length=0;
    document.getElementById( 'select2' )[0]=new Option("1.2", "1.2", true, false);
    document.getElementById( 'select2' )[1]=new Option("1.3", "1.3", false, false);
    document.getElementById( 'select2' )[2]=new Option("1.4", "1.4", false, false);
    }
    $('#fwselector').show('slow', function() {
        });
}
</script>
<div id="mainimg"><img src="images/devices.png"/></div>
<div id="formcontainer">
    <form>
        <select id="select1" name="select1" onchange="Select1();">
            <option value="Phone" disabled="disabled" >Phone</option>
            <option value="p1">iPhone 2G</option>
            <option value="p2">iPhone 3G</option>
            <option value="p3">iPhone 3GS</option>
            <option value="p4">iPhone 4</option>
            <option value="p5">iPhone 4S</option>
        </select>
    </form>
    <div id="fwselector" style="display: none">
        <select  name="select2" id="select2">
            <option value="Firmware" disabled="disabled" selected="selected">Firmware</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </div>
</div>

</body>
</html>

我应该提一下，我对HTML或CSS之外的任何其他内容都不是很熟悉，我刚刚通过将不同指南的内容合并在一起来做到这一点。

感谢。

Answer 1

我们可以做很多事情来简化这里。

// let's "cache" our selectors to make them fast
var $select1 = $("select[name=select1]")
var $select2 = $("select[name=select2]")

// lets create an object to store options based on value of select one
var options = {
   "value1": [
         {value: "sample1", text: "sample option #1"},
         {value: "sample2", text: "sample option #2"},
         {value: "sample3", text: "sample option #3"},
         {value: "sample4", text: "sample option #4"},
    ]
   "value2": [
         {value: "sample5", text: "sample option #5"},
         {value: "sample6", text: "sample option #6"},
         {value: "sample7", text: "sample option #7"},
         {value: "sample8", text: "sample option #8"},
    ]
}

$select1.change(function() {
   var val = $(this).val()
   $select2.empty(); // clear all options of $select2
   populateSelectBox2(val)
})

// add a specific option
function addOption(text, value) {
    $select2.append("<option>", {value: value, text: text})
}

// loop through possible answers and add each
function populateSelectBox2(val) {
 for (var i = 0; i < options[val].length; i++) {
   addOption(options[val][i].text, options[val][i].value);
 }
}

Answer 2

这是你在找什么？

http://www.appelsiini.net/2010/jquery-chained-selects

链式选择框的非常简单的解决方案。

如何在使用jQueryUI时更改选择框选项

2 个答案: