Jquery dependent drop down boxes populate- how

后端未结

关注

 3  459

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:

相关标签:

3条回答

梦毁少年i

2020-11-29 12:59

/This is JavaScript code/

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>

0 讨论(0)

自闭症患者

2020-11-29 13:07

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');

0 讨论(0)

执笔经年

2020-11-29 13:21

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/

0 讨论(0)