Jquery dependent drop down boxes populate

 

I've got dependent drop down boxes as shown on scenario below. Could anyone please suggest how to achieve the result using JQuery/Javascript?

Scenario: 

HH1:
    <select name="drop1">
      <option value="0">
      <option value="2">
      <option value="3">
      ......
      <option value="23">
    </select>

HH2:
    <select name="drop1">
      <option value="0">
      <option value="2">
      <option value="3">
      ......
      <option value="23">
    </select>

Edit: Sorry I forgot to mention the option items are being populated via javascript (for loop). I just need to know how to make HH2 dynamic based on HH1 selected value.

If the user selects 3 in option HH1(Hour) I would like to show only 3-0 (where 0 is 24 hour) select options in HH2. I don't want to see 1-2.

Basically, HH2 is dependent on selected value in HH1 — is this possible in JavaScript? Could you please show me how, if possible? 

var drop2 = $("select[name=drop2] option"); // the collection of initial options
$("select[name=drop1]").change(function(){
    var drop1selected = parseInt(this.value); //get drop1 's selected value
    $("select[name=drop2]")
                     .html(drop2) //reset dropdown list
                     .find('option').filter(function(){
                        return parseInt(this.value) < drop1selected; //get all option with value < drop1's selected value
                      }).remove();  // remove
});

http://jsfiddle.net/HTEkw/

The short answer is Yes it is possible in JavaScript/Jquery.

You could do it like this defining your dependencies in a brand new HTML5 data-* attribute :-)

HTML like this: 

HH1:
<select name="drop1">
    <option value="0" data-shown="0,2">00</option>
  <option value="2" data-shown="2,3">02</option>
  <option value="3" data-shown="3,23">03</option>
  <option value="23" data-shown="23,0">23</option>
</select>

HH2:
<select name="drop2">
  <option value="0">00</option>
  <option value="2">02</option>
  <option value="3">03</option>
  <option value="23">23</option>
</select>

And Javascript(JQuery) like this: 

$('select[name="drop1"]').change(function () {
var ar = $('select[name="drop1"] option:selected').attr('data-shown').split(',');
$('select[name="drop2"] option').each(function(){
    $(this).toggle(false);
    for(var i = 0; i <= ar.length; i++){
        if($(this).attr('value') == ar[i]){
        $(this).toggle(true);
        }
    }
});}).trigger('change');

That should do what you want done on your drop downs.

With the condition you put in the comment it is a bit easier: 

$('select[name="drop1"]').change(function () {
    var number = parseInt($('option:selected', this).attr('value'));
    $('select[name="drop2"] option').each(function(){
            $(this).toggle(parseInt($(this).attr('value')) >= number);
        });
}).trigger('change');

/这是JavaScript代码/ 

function fndroplist(listindex) {
        $("#ddlCity").options.length("");
        switch (listindex) {
            case "Karnataka":
                $("#ddlCity").options[0] = new Option("--select--", "");
                $("#ddlCity").options[1] = new Option("Dharawad", "Dharawad");
                $("#ddlCity").options[2] = new Option("Haveri", "Haveri");
                $("#ddlCity").options[3] = new Option("Belgum", "Belgum");
                $("#ddlCity").options[4] = new Option("Bijapur", "Bijapur");
                break;

            case "Tamilnadu":
                $("#ddlCity").options[0] = new Option("--select--", "");
                $("#ddlCity").options[1] = new Option("Chennai", "Chennai");
                $("#ddlCity").options[2] = new Option("Vijayada", "Vijayada");
                break;
        }
    }
    </script>



<body>
        <div>
            <p>
                <label id="lblCt">
                    City:</label>
                <select id="ddlCity" style="width: 142px;">
                    <option>--Select--</option>
                </select>
                <span class="red">*</span>
                <label id="lblCity" style="color:Red; font-size:small;">
                </label>
            </p>
        </div>
        <div>
            <p>
                <label>
                    Country:</label>
                <input type="text" id="txtCountry" />
                <label id="lblCountry" style="color:Red; font-size:small;">
                </label>
            </p>
        </div>
</body>
链接地址: http://www.djcxy.com/p/83926.html

上一篇: 检查obect是否是jQuery包装器

下一篇: jquery相关的下拉框填充