CODEWITHSUNDEEP
jqueryhtmlonchangehtml-select
Brett J Mason
Brett J Mason

Reputation: 65

Cascading dropdown and Select Links to Page onchange

I'm using a script to populate a second Select. Using the values of the second select to pair with first select.

    $("#select1").change(function() { 
    if($(this).data('options') == undefined){
    $(this).data('options',$('#select2 option').clone());
    } 
    var id = $(this).val();
    var options = $(this).data('options').filter('[value=' + id + ']');
    $('#select2').html(options);
    });

I would like to use onchange on the second select to link to a page. This is what I'm using/would like to use.

    <select ONCHANGE="location = this.options[this.selectedIndex].value;">
    <option value="http://www.apple.com/">Apple</option>
    </select>

My question is: How can I put the url in the value of second select when I'm using that value to identify with first select?

Also, when page loads the second select displays all options until selection of first select then it will display only those with matching values.

This is my html:

    <div id="location_select">
    <table align="center">
    <tbody><tr>
    <th><label for="select1">Province:</label></th>
    <td>
  <select id="select1" name="select1">
<option select="selected" value="0"></option>
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
</select></td>
</tr>
    <tr>
    <th><label for="select2">City:</label></th>
    <td>
    <select id="select2" name="select2">
    <option value="0"></option>
    <option value="AB"></option>
    <option value="AB">a</option>
    <option value="AB">b</option>
    <option value="AB">c</option>
    <option value="BC"></option>
    <option value="BC">d</option>
    <option value="BC">e</option>
    <option value="BC">f</option>
    </select>
    </td>
    </tr>
    </tbody></table>
    </div>

Upvotes: 0

Views: 1975

Answers (1)

Daniel
Daniel

Reputation: 1295

I changed your code a bit:

Javascript:

$("#select2").attr("disabled", true);

$("#select1").change(function() { 
    if($(this).data('options') == undefined){
        $(this).data('options',$('#select2 option').clone());
    } 
    var id = $(this).val();
    var options = $(this).data('options').filter('[id=' + id + ']');
    $('#select2').html(options);
    $("#select2").attr("disabled", false);
});


$("#select2").change(function() { 
    var link = $(this).val();
    alert(link);
});

The html:

<div id="location_select">
    <table align="center">
    <tbody>
    <th><label class="select_location_label" for="select1">Province:</label></th>
    <td>
  <select id="select1" name="select1">
<option select="selected" value="0"></option>
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
</select></td>
</tr>
    <tr>
    <th><label class="select_location_label" for="select2">City:</label></th>
    <td>
    <select id="select2" name="select2">
    <option id="0">Select Province first</option>
    <option id="AB" value="http://www.google.com"></option>
    <option id="AB" value="http://www.google.com">a</option>
    <option id="AB" value="http://www.google.com">b</option>
    <option id="AB" value="http://www.google.com">c</option>
    <option id="BC" value="http://www.google.com"></option>
    <option id="BC" value="http://www.google.com">d</option>
    <option id="BC" value="http://www.google.com">e</option>
    <option id="BC" value="http://www.google.com">f</option>
    </select>
    </td>
    </tr>
    </tbody></table>
    </div>

See jsfiddle for the working version: http://jsfiddle.net/7qDgZ/1/ That should help you

Upvotes: 1

Related Questions