I have a drop down menu; having column names from database table. Now, I have another dropdown menu.
What I want is; When I select column name from first dropdown menu, It shows the values of that selected column name from database table in second dropdown menu.
I have inserted column names for the first dropdown menu in options tag but i want to retrieve all column values based on selected column name from database table.
Here is my code:
<select name="first">
<option selected="true" disabled="disabled">Select an Option</option>
<option value="all">Select All</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
Where a,b,c,d
are the column names. Please help me out.
You can try like this
HTML:
<select name="category">
<option value="0">None</option>
<option value="1" rel="accessories">Novels</option>
<option value="2" rel="sports">Scooties</option>
<option value="3" rel="cars">Bikes</option>
</select>
<select name="items" class="cascade">
<option value="3" class="accessories">Immortals of meluha/option>
<option value="8" class="accessories">Half Girlfriend</option>
<option value="1" class="sports">Active 5G</option>
<option value="4" class="sports">Active 4G</option>
<option value="6" class="cars">Royal Enfield</option>
<option value="2" class="cars">Pulsor</option>
</select>
JQUERY :
$(document).ready(function(){
var $cat = $('select[name=category]'),
$items = $('select[name=items]');
$cat.change(function(){
var $this = $(this).find(':selected'),
rel = $this.attr('rel'),
$set = $items.find('option.' + rel);
if ($set.size() < 0) {
$items.hide();
return;
}
$items.show().find('option').hide();
$set.show().first().prop('selected', true);
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.