Javascript 如何动态更改下拉列表值_Javascript_Jquery_Drop Down Menu

Javascript 如何动态更改下拉列表值

javascript jquery drop-down-menu

Javascript 如何动态更改下拉列表值,javascript,jquery,drop-down-menu,Javascript,Jquery,Drop Down Menu,我需要你的帮助，因为我不擅长jQuery。我有下面的代码，想做一些更改如果用户选择1/2下拉列表1和HDBdrop下拉列表第二，那么我想在第三个下拉列表中将此船码头、唐人街更改为金钟、亚历山德拉路。还有一件事，我想设置一个下拉列表，默认情况下每次一个我的代码参考链接：如果有人能帮助我，我将不胜感激： <!doctype html> <html> <head> <title>Custom Styled Selectbox</tit

我需要你的帮助，因为我不擅长jQuery。我有下面的代码，想做一些更改

如果用户选择1/2下拉列表1和HDBdrop下拉列表第二，那么我想在第三个下拉列表中将此船码头、唐人街更改为金钟、亚历山德拉路。还有一件事，我想设置一个下拉列表，默认情况下每次一个

我的代码参考链接：

如果有人能帮助我，我将不胜感激：

    <!doctype html>
<html>
<head>
<title>Custom Styled Selectbox</title>
<link rel="stylesheet" href="http://www.roblaplaca.com/docs/custom-selectbox/css/customSelectBox.css" />
</head>
<body class="noJS">
<script type="text/javascript"> 
try{Typekit.load();}catch(e){}
    var bodyTag = document.getElementsByTagName("body")[0];
    bodyTag.className = bodyTag.className.replace("noJS", "hasJS");
</script>
<div class="grid-system clearfix">
  <div class="row">
    <div class="col span-9">
      <div class="example clearfix">
        <select class="custom interactive" id="properties">
          <option value="selectone">Select a Type</option>
          <option value="rfs">One</option>
          <option value="rfr">Two</option>
          <option value="cfs">Three</option>
          <option value="cfr">Four</option>
        </select>

        <select class="custom interactive" id="TypeList">
          <option>One</option>
          <option>Two</option>
          <option>Three</option>
          <option>Four</option>
        </select> 

        <select class="custom">
          <option value="">Any</option>
          <option value="">Boat Quay</option>
          <option value="">Chinatown</option>
        </select>
      </div>
    </div>
  </div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
<script src="http://github.com/vitch/jScrollPane/raw/master/script/jquery.jscrollpane.js"></script> 
<script src="http://www.roblaplaca.com/docs/custom-selectbox/js/SelectBox.js"></script> 
<script type="text/javascript"> 
$(function() {
    window.prettyPrint && prettyPrint()
    /*
        This is how initialization normally looks. 
        Typically it's just $("select.custom"), but to make this example more clear 
        I'm breaking from the pattern and excluding interactive
    */
    $("select.custom").not(".interactive").each(function() {
        var sb = new SelectBox({
            selectbox: $(this),
            height: 150,
            width: 200
        });
    });

    /*
        Adding some extra functionality for "interactive" selects
    */
    var TypeList = {
        selectone: ["Select a Type"],
        rfs: ["Any", "Landed", "Condominium", "HDB", "Others"],
        rfr: ["Any", "Landed", "Condominium", "HDB", "Others"],
        cfs: ["Any", "Industrial", "Retail", "Land", "Office", "Others"],
        cfr: ["Any", "Industrial", "Retail", "Land", "Office", "Others"]
        }

    var defaultSelectboxSettings = {
        height: 150,
        width: 150
    };

    var country_SB = null,
    city_SB = null;

    $("select.interactive").each(function() {
        if ($(this).attr("id") == "properties") {
            country_SB = new SelectBox($.extend(defaultSelectboxSettings, {
                selectbox: $(this),
                changeCallback: function(val) {
                    if (TypeList[val]) {
                        city_SB.enable();
                        updateCities(val);
                    }
                    if (val == "selectone") {
                        city_SB.disable();
                    }
                }
            }));
        } else if ($(this).attr("id") === "TypeList") {
            city_SB = new SelectBox($.extend(defaultSelectboxSettings, {
                selectbox: $(this)
                }));
        }
    });

    updateCities($("#properties").val());

    if ($("#properties").val() == "selectone") {
       //city_SB.disable();
    }

    function updateCities(val) {
        var $select = $("select#TypeList"),
        html = "";

        for (var i = 0; i < TypeList[val].length; i++) {
            html += '<option>' + TypeList[val][i] + '</option>';
        }
        $select.html(html);

        // HACK: chrome is too fast?
        setTimeout(function() {
            city_SB.sync();
        }, 1);
    }

});         
</script>
</body>
</html>

以下是可用于添加选项的代码段：

var newOption = document.createElement("option");
newOption.value="newValue";
newOption.innerHTML = "Option Text";

$("#properties").append(newOption);

要删除选项，请使用

$("#idOfTheOption").remove();

只需对所有要更改的对象重复此操作

因为您有数组，所以可以这样做

$("#properties").html("");

for(var i=0; i<array.length;i++ ){
   var newOption = document.createElement("option");
   newOption.value=array[i];
   newOption.innerHTML = array[i];

   $("#properties").append(newOption);
}