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

How to change a select box option when using jQueryUI

本文关键字：选择 选项 jQueryUI      更新时间：2023-09-26

我想做的是:你打开页面，有一个选择框，你在其中选择选项a，另一个选择框，选项B，出现并显示选项取决于用户为a选择了什么选项

我在一些帮助下做到了这一点，但我想定制选择框，我能找到的唯一方法是实现jQueryUI来支持onchange回调。我可以让选项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之外，我对其他任何东西都不太熟悉，我只是通过将不同指南的内容合并在一起来做到这一点。

谢谢。

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

// 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);
 }
}

这是你要找的吗?

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

相关文章：