rich5467 rich5467 - 23 days ago 7
jQuery Question

jQuery function - Simple Drop down selection populated with dropdown selection from another list

Hello, at first glance it may seem like this is a duplicate from another post here on Stack Overflow, however it is not. I have searched for an answer to my question and while I have found some good snippets and used some of that information. A direct answer to my question does not exist.

Just a quick note: I have also asked this on other forums. I have a feeling that this is something that may end up helping a lot of developers, so even if I get an answer somewhere else (or figure this out before then), I will post it here as well.

What I wish to do, simply and distinctly is:


  1. Select an option on the "first dropdown list (Fruit)".

  2. Set the default value on the "second dropdown list (Fruit_Types)", based upon the selection of the first.



Optimally all values (under Fruit_Types) related to the First selection value would be populated in the second selection box.


  1. Use one small jQuery function to do this and have no reference to the jQuery on the selection list. In other words I should be able to drop this in to any html page with any two related lists (see code) and it should work. The jquery should be completely autonomous.



I would appreciate any help at all with this.

Please let me know if someone can help me get this to work properly. Thank You.

Most of the work is already done (see code), however I would like this to work all the time, every time. So far it only works under these conditions:


  1. On Page Refresh/Load

  2. One time after the page loads



Then it stops working.

# Start Code



<!DOCTYPE html>
<html>
<head>
<title>Select one value based on the selection of another</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>

jQuery(document).ready(function($) {

jQuery( "#Fruit" )
.change(function () {
var str = "";
jQuery('option:selected', this).each(function() {
str += jQuery( this ).text() + " ";
//Added with help from Chainat, Stack Overflow
jQuery("#Fruit_Types option").removeAttr('selected');
jQuery("#Fruit_Types option:contains(" + str + ")").first().attr('selected', 'selected');
});
})
.change();

});

</script>

</head>
<body>

<p>Select the top list and the second list should populate with the corresponding related values.</p>

<select id="Fruit">
<option id="1">Apples</option>
<option id="2">Oranges</option>
</select>

&nbsp;

<select id="Fruit_Types">
<option id="3">Apples Green</option>
<option id="4">Apples Red</option>
<option id="5">Apples Granny Smith</option>
<option id="6">Apples Fuji</option>
<option id="7">Oranges California</option>
<option id="8">Oranges Florida</option>
<option id="9">Oranges Blood</option>
<option id="10">Oranges Seedless</option>
</select>

</body>
</html>





# End Code

Answer

First issue, the code keeps adding a selected attribute to all items you have on the second list. You need to remove them first, also you may want to select only one item in the second list too. This code will address that

 jQuery("#Fruit_Types option").removeAttr('selected');
 jQuery("#Fruit_Types option:contains(" + str + ")").first().attr('selected', 'selected');

If you want to only show the related items in the second list, you may consider keeping the fruit type on a variable or something, and populate them dynamically depending on the selected fruit item.