Как изменить опцию выбора поля при использовании jQueryUI - PullRequest
Новая
       35

Как изменить опцию выбора поля при использовании jQueryUI

1 голос
/ 01 ноября 2011

Вот что я пытаюсь сделать: Вы открываете страницу, и появляется окно выбора, где вы выбираете опцию 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.Просто сделайте это, объединив вещи из множества различных руководств.

Спасибо.

Ответы [ 2 ]

1 голос
/ 01 ноября 2011

Есть много вещей, которые мы можем сделать, чтобы упростить здесь. 

// 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);
 }
}
0 голосов
/ 02 ноября 2011

Это то, что вы ищете?

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

Очень простое решение для цепочек выбора.

...