CODEWITHSUNDEEP
javascriptjqueryhtmlcoldfusion
Denoteone
Denoteone

Reputation: 4055

Remove Select Dropdown option based on previous selection of a dropdown

I know there are a few examples I have looked through on here but I am still not able to get my jquery to work correctly.

Question: If user selects a specific option from dropdown #1 then change the options in dropdown #2 How is this accomplished?

HTML/Coldfusion:

<label>*Xpress Mod/Paint:</label> <cfselect name="xpress_mod_data">
<option value="Non-Xpress">Non Xpress 
<option value="3-Day">3-Day Xpress
</cfselect>

<label>Enclosure Type:</label> <cfselect name="enclosure_type">
<option value="global">Global 
<option value="server_optimized">Server Optimized 
</cfselect>

This is my JQuery:

$('#xpress_mod_data').change(function() {

        if($(this).attr("value")=="3-Day") {
            $("#enclosure_type option[value='server_optimized']").remove();
        } else {
        $('#enclosure_type').append('<option value="server_optimized">Server Optimized');
        }

});

What is happening when I run my code: The option that is supposed to be appended keeps getting added over and over again.

Upvotes: 1

Views: 836

Answers (2)

James Moberg
James Moberg

Reputation: 4475

For greater flexibility in case you need to add multiple chained selects, have multiple parents or use Ajax to build the drop-downs, check out the jQuery Chained Selects plugin. (It greatly simplified a project where I needed 5 possible drop-downs working together.)

http://www.appelsiini.net/projects/chained

Upvotes: 0

I&#39;m Geeker
I&#39;m Geeker

Reputation: 4637

you didnt use id in your html id="xpress_mod_data" this one is missing Check Demo here

Html

   <select name="xpress_mod_data" id="xpress_mod_data">
        <option value="Non-Xpress">Non Xpress </option>
    <option value="3-Day">3-Day Xpress</option>
    </select>

    <label>Enclosure Type:</label>  
    <select name="enclosure_type" id="enclosure_type">
    <option value="global">Global  </option>
    <option value="server_optimized">Server Optimized  </option>
    </select>

Jquery

$('#xpress_mod_data').change(function() {

 if($(this).val()=="3-Day") {
     console.log('test');
            $("#enclosure_type option[value='server_optimized']").remove();
        } else {
        $('#enclosure_type').append('<option value="server_optimized">Server Optimized');
        }

});

Upvotes: 3

Related Questions