CODEWITHSUNDEEP
javascriptjquery
carlo yap
carlo yap

Reputation: 79

javascript affecting both drop downs

i have two drop downs, below is the code, my second dropdown is dependent to my first dropdown, so when i selected from first dropdown it will show options in second dropdown based on what i selected in the first. and then when i select an option from my second dropdown it will call a php page. but whats happening right now is when i select an option from my first dropdown, the page just refreshed and not giving option to select from second dropdown.

<tr>
<td align="center"><select name="Ticket" id="Ticket">
<option value="" selected="selected">Please Select...</option>
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
</select></td>

<tr>
<td align="center"><select name="Category" size="1" id="Category">
<option value="" selected="selected">--</option>
<option value="Select1.php" class="Option1">Select1</option>
<option value="Select2.php" class="Option2">Select2</option>
</select><input type="submit" value="Go" id="submit"/></td>
</tr>

and here is my js code so that second dropdown would call the php page,

UPDATE: i've updated the jquery and page is not refreshing when i select from my first dropdown but whats happening now is its trying to redirect the page already as soon as i selected from first dropdown...i want that to happen on my second dropdown and not on the first...

$(function() {

$("#submit").hide();

$("#form1 select").change(function() {
    window.location = $("#form1 select option:selected").val();
})

});

Upvotes: 0

Views: 102

Answers (2)

Sean Kenny
Sean Kenny

Reputation: 1636

This should do the trick. The page will only redirect when you click the 'Go' button.

$(function () {
    $('#Ticket').change(function() {
        var optionClass = $(this).val();
        $('#Category option:not(:first)').hide();
        if (optionClass) {
            $('#Category').find('.' + optionClass).show();
        }
    });

    $('#submit').click(function () {
        window.location = $("#Category").val();
    });
});

If you want to redirect as soon as the second selectlist option is selected, replace the $('#submit').click.... with

$(function() {
    $('#Ticket').change(function() {
        var optionClass = $(this).val();
        $('#Category option:not(:first)').hide();
        if (optionClass) {
            $('#Category').find('.' + optionClass).show();
        }
    });

    $('#Category').change(function() {
        var url = $(this).val();
        if (url) {
            window.location = url;
        }
    });
});

Upvotes: 1

ilyes kooli
ilyes kooli

Reputation: 12043

Change

$("#form1 select").change(function() {
    window.location = $("#form1 select option:selected").val();
})

to

$("#Category").change(function() {
    window.location = $(this).val();
})

Upvotes: 1

Related Questions