5

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?

Nil Pun
  • 17,035
  • 39
  • 172
  • 294

3 Answers3

4
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/

Jishnu A P
  • 14,202
  • 8
  • 40
  • 50
  • @theSuperTramp, thank you. Almost, i'm getting NAN for this line: var drop1selected = parseInt($(this).find(":selected")); alert(drop1selected); – Nil Pun May 06 '11 at 11:35
  • @theSuperTramp, what is http://jsfiddle.net/HTEkw/. I've seen couple of times on few other threads (jquery mainly). Is it a tool i can use to create jquery or your demo site? – Nil Pun May 06 '11 at 11:54
  • you can write in jquery code and let others see what your code through jsfiddle – Jishnu A P May 06 '11 at 11:59
  • hey @theSupertramp, any reason this select not working:$("select[name=test]").html(drop2).find('option').filter(function(){ return (parseInt(this.value) == drop1selected); }).Select();. Basically i want the field selected. – Nil Pun May 06 '11 at 12:15
  • if you want to select a particular item see this post http://stackoverflow.com/questions/499405/change-selected-value-of-drop-down-list-with-jquery – Jishnu A P May 06 '11 at 12:58
0

/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>
chetan
  • 1
0

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');
Guidhouse
  • 1,406
  • 11
  • 18
  • Thanks @Guidhouse, dependency is HH2 Options >= SELECTED value in HH1 e.g. if 2 is selected only show 2 or greater. – Nil Pun May 06 '11 at 11:08