Changed Value of one Dropdown from another using jQuery

Question

So I took a look over at This post and it "almost" does what I want. The issue is that in this example the vales of both drop downs are the same so its as easy as saying:

$("#dropdwon1").change(function(){
    $("#dropdwon2").val($(this).val());
});

The issue for me is that I want to map one value to another.

In the example I'm using I want the value of 'cow' from the first drop down to select the value of '134' in the other. You can see my jFiddle to actually see the Class Type dropdown and the hidden one. So the mapping would be:

<select id="edit-type" name="type" class="form-select">
    <option value="All" selected="selected">- Any -</option>
    <option value="bull">Bulls</option>
    <option value="cowpair">Cow/Calf Pair</option>
    <option value="cow">Cows</option>
    <option value="feeder">Feeders</option>
    <option value="female">Replacement Females</option>
    <option value="stocker">Stockers</option>
</select>

with:

<select id="edit-field-class-tax-tid" name="field_class_tax_tid" class="form-select">
    <option value="All" selected="selected">- Any -</option>
    <option value="139">Stockers</option>
    <option value="136">Cow/Calf Pairs</option>
    <option value="134">Cows</option>
    <option value="138">Feeders</option>
    <option value="135">Replacement Females</option>
    <option value="137">Bulls</option>
</select>

All = All
bull = 137
female = 135
stocker = 139
cowpair = 136
cow = 134
feeder = 138

I'm really scratching my head over this one.

I don't really need it to cascade. I just need it to be mapped to each value based on selection. Its a bit different from the cascade concept. — Mr. BigglesWorth, Mar 07 '14 at 02:49

score 0 · Accepted Answer · edited May 23 '17 at 12:28

Since the value in the next drop down is different, perhaps you need to map it with some if or switch statements? Something like

$("#edit-type").change(function(){

    var selectedVal = "All";
    if($(this).val() == 'cow')
        selectedVal = "134"
    //add the rest of the value mapping

    $("#edit-field-class-tax-tid").val(selectedVal);
});

UPDATE if you don't wish to have a long if / switch block, perhaps you can use a JSON object to host the value and map it instead. Refer to this: How to populate a cascading Dropdown with JQuery

Not sure if there's other better way of doing it. Hope this helps.

I'd edited my answer with some reference to using JSON to map the value, see if it helps. — ipohfly, Mar 07 '14 at 03:22

score 0 · Answer 2 · answered Mar 07 '14 at 03:12

0

  $("#edit-type").change(function(){    
    $("#edit-field-class-tax-tid option:contains("+ $(this).val() +")").attr('selected', true);   
});

This answer works exactly with your fiddle. But I had to change the values a bit. If you want to compare the value of the first with the text of the second they have to be the same. value of first drop down was "cow" and text of the other downdown is "Cows"

answered Mar 07 '14 at 03:12

Cyassin

1,437
1
15
31

$("#edit-type").change(function(){ $("#edit-field-class-tax-tid option:contains("+ $("#edit-type option:selected").text() +")").attr('selected', true); }); will work exactly without you needing to change anything. It just sets the dropdown 2 to the text of dropdown 1 – Cyassin Mar 07 '14 at 03:18

Changed Value of one Dropdown from another using jQuery

2 Answers2