I have a select option with multiple optgroups.
I want to select multiple values from each group & get values based on the label(of optgroup) on submiting it.
HTML code is
<table>
<tr>
<td>Select</td>
<td>
<select multiple="multiple" id="multiGrpSel" ">
<optgroup label="Indutry Types" id="types">
<option value="1">Private</option>
<option value="2">Public</option>
<option value="3">Govt</option>
</optgroup>
<optgroup label="Unit Category" id="unit">
<option value="1">Micro</option>
<option value="2">Small</option>
<option value="3">Medium</option>
</optgroup>
</select>
</td>
</tr>
<tr><th align="center"> <input type="button" id="submit" class="button" value="Submit"> </th></tr>
</table>
And on submit
$("#submit").die('click').live('click',function() {
$('#multiGrpSel').find("option:selected").each(function(){
//optgroup label
console.debug('label='+$(this).parent().attr("label"));
//optgroup id
console.debug('id='+$(this).parent().attr("id"));
// values based on each group ??
id = $(this).parent().attr("id");
console.debug('value='+$('#'+id).val());
});
});
If two options from 1st & 2nd optgroups are selected, I am getting the label & id , but the value are getting as blank.
Output:
label=Unit Category
id=unit
value=
label=Unit Category
id=unit
value=
label=Industry Types
id=types
value=
label=Industry Types
id=types
value=
Actually, you already have access to the values of those selected options, but you are actually trying to get a value from the optgroup not from the option since you used the optgroup's #id to determine its value, that's why you always get a blank result for the value.
See a working code below:
$("#submit").click(function (){
$('#multiGrpSel').find("option:selected").each(function(){
//optgroup label
var label = $(this).parent().attr("label");
//optgroup id
console.log('id='+$(this).parent().attr("id"));
// values based on each group ??
id = $(this).parent().attr("id");
// gets the value
console.log("label: "+label+" value: "+$(this).val())
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="multiple" id="multiGrpSel">
<optgroup label="Indutry Types" id="types">
<option value="1">Private</option>
<option value="2">Public</option>
<option value="3">Govt</option>
</optgroup>
<optgroup label="Unit Category" id="unit">
<option value="1">Micro</option>
<option value="2">Small</option>
<option value="3">Medium</option>
</optgroup>
</select>
<input type="button" id="submit" value="submit"/>
The value (text value) is just the text content of this.
console.debug('value=' + $(this).text());
If you want the real value (corresponding numbers) use this:
console.debug('value=' + $(this).val());
$("#submit").click(function (){
$('#multiGrpSel').find("option:selected").each(function(){
//optgroup label
var label = $(this).parent().attr("label");
//optgroup id
console.log('id='+$(this).parent().attr("id"));
// values based on each group ??
id = $(this).parent().attr("id");
// gets the value
console.log("label: "+label+" value: "+$(this).val())
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="multiple" id="multiGrpSel">
<optgroup label="Indutry Types" id="types">
<option value="1">Private</option>
<option value="2">Public</option>
<option value="3">Govt</option>
</optgroup>
<optgroup label="Unit Category" id="unit">
<option value="1">Micro</option>
<option value="2">Small</option>
<option value="3">Medium</option>
</optgroup>
</select>
<input type="button" id="submit" value="submit"/>
Related
I have a table with dynamically created rows, on each row I want to have 2 dropdowns/selects that are dependent on each other.
I have found 2 fiddles, the first is the exact output i want but the code is confusing and uses json. the second code is the easiest to understand but is not dynamic. Is there a way to make them work together?
// http://jsfiddle.net/C2xsj/5/ <----- this is the output i want but the code is kinda confusing for me
// https://jsfiddle.net/fwv18zo1/ <--- this has the simpler code
lets assume this is my table:
<INPUT type="button" value="Add Row" id="button"/>
<form id="myForm">
<TABLE id="addTable" >
<TR><TD>
<select id="selectCategory">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
</TD>
<TD>
<select id="selectSubCategory" >
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
</TD></TR>
</TABLE>
</form>
when someone clicks the add row button, it creates a new row
using something similar to this all the options are coded into this function such as ():
$('#button').click(function() {
var table = $('#addTable');
table.append('<tr><td data-label="Task"><select class="ui fluid search dropdown" required><option value="1">Fruit</option><option value="2">Animal</option><option value="3">Bird</option><option value="4">Car</option></select><select class="ui fluid search dropdown" required><option value="1">Banana</option><option value="1">Apple</option><option value="1">Orange</option><option value="2">Wolf</option><option value="2">Fox</option><option value="2">Bear</option><option value="3">Eagle</option><option value="3">Hawk</option><option value="4">BWM<option></select></tr>');
}
so my issue is that since they cant all have the same id such as the ones in the fiddle, how i make the pair of selects on each row dependent
Here i used clone function. read comment on JS to know more.
$(document).on("change",".select1",function(){
var thisParent = $(this).parents("tr"); // detect the parent of the select1.
$(".select2",thisParent).find('option[value]').addClass('hidden'); // hide all option values.
$(".select2",thisParent).find('option[value="' + this.value + '"]').removeClass('hidden'); // show only values that match the 'select1' value.
});
$(".addNew").click(function(){ // clone button
$(".cloneThis").clone().appendTo("tbody"); // clone the class 'cloneThis' and append it into tbody.
$("tr:last").removeClass("cloneThis"); // remove 'cloneThis' class from the last appended child, so you can clone it again from the original one.
$("button:last").removeClass("addNew").addClass("removeThis").html("Remove"); // replace 'Add' with 'Remove' and add class 'removeThis' to be able to remove this tr.
});
$(document).on("click",".removeThis",function(){ // remove function.
$(this).parents("tr").remove(); // find this button parent and remove it.
});
table{
width:100%;
}
select, button{
width:30%;
}
.hidden{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="cloneThis">
<td>
<select name="select1" class="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" class="select2">
<option>Select type first</option>
<option value="1" class="hidden">Banana</option>
<option value="1" class="hidden">Apple</option>
<option value="1" class="hidden">Orange</option>
<option value="2" class="hidden">Wolf</option>
<option value="2" class="hidden">Fox</option>
<option value="2" class="hidden">Bear</option>
<option value="3" class="hidden">Eagle</option>
<option value="3" class="hidden">Hawk</option>
<option value="4" class="hidden">BWM<option>
</select>
<button class="addNew">Add</button>
</td>
<tr>
</tbody>
</table>
<span id="s_home_country">
<select name="Home Country" id="home_country">
<option value="Select one" selected="selected">Select one</option>
<option value="h1">Home1</option>
<option value="h2">Home2</option>
<option value="h3">Home3</option>
<option value="h4">Home4</option>
</select>
</span>
and I have another data that i want to incorporate, when Home1 is selected, I want this to show 21-dec into another textbox automatically. and so on..
var Home_country = [
"21-Dec",
"01-Jan",
"01-Jan",
"01-Jan",
];
You could use an object and an event listener.
var home_country = {
"h1":"21-Dec",
"h2":"01-Jan",
"h3":"01-Jan",
"h4":"01-Jan",
};
var selectbox = document.getElementById('home_country');
var textbox = document.getElementById('home_country_date');
selectbox.addEventListener('change', function(e){
textbox.value = home_country[this.value]
})
<span id="s_home_country">
<select name="Home Country" id="home_country">
<option value="Select one" selected="selected">Select one</option>
<option value="h1">Home1</option>
<option value="h2">Home2</option>
<option value="h3">Home3</option>
<option value="h4">Home4</option>
</select>
</span>
<input type="text" id="home_country_date">
Please find below snippet just add another attribute data-attr1 and on change of select list find selected option and get its attribute with name data-attr1 and pass attribute's value to textbox
$("#home_country").on("change",function(){
$(".txtvalue").val($(this).find("option:selected").attr("data-attr1"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="s_home_country">
<select name="Home Country" id="home_country">
<option value="Select one" selected="selected">Select one</option>
<option data-attr1="21-Dec" value="h1">Home1</option>
<option data-attr1="01-Dec" value="h2">Home2</option>
<option data-attr1="02-Dec" value="h3">Home3</option>
<option data-attr1="03-Dec" value="h4">Home4</option>
</select>
</span>
<input type="text" class="txtvalue" />
Add an event listener to your select input which outputs the relevant value from your array when an option is selected:
var el = document.getElementById('home_country');
var textbox = document.getElementById('your_textbox_el');
el.addEventListener('change', function(e){
if (e.target.value == 'h1') {
textbox.value = Home_country[0];
} else if (e.target.value == 'some other condition') {
// do something else
}
}
Unless I'm misunderstanding you, you can just put the values of the Home_country array inside the value properties of the options like so:
<span id="s_home_country">
<select name="Home Country" id="home_country">
<option value="Select one" selected="selected">Select one</option>
<option value="21-Dec">Home1</option>
<option value="01-Jan">Home2</option>
<option value="01-Jan">Home3</option>
<option value="01-Jan">Home4</option>
</select>
</span>
Now, when you do get the value of your select element, it will be the value in the array that you gave.
How can I set the price of items using dropdown menu lets say I have a dropdown menu with cars and trucks and depending on what the user picks the prices will vary how can I set the price of each one and update a box containing the price of each item.
<p><b>Truck: </b><select id="states" name="states" size="1">
<option>Please Choose</option>
<option value="F150">F150</option>
<option value="Ram1500">Ram1500</option>
<option value="chevy">chevy</option>
</select><br /></p><p><b>sports car: </b><select id="states" name="states" size="1">
<option>Please Choose</option>
<option value="mustang">mustang</option>
<option value="charger">charger</option>
<option value="camaro">camaro</option>
</select><br /></p>
Add extra attribute for price uzing data-* attributes, then on change get the value of this attribute and show it in the price field :
$('body').on('change', '#trucks', function(){
var selected_truck_price = $('option:selected', this).data('price');
$('#price').val(selected_truck_price);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<b>Truck: </b>
<select id="trucks" name="trucks" size="1">
<option>Please Choose</option>
<option data-price="150" value="F150">F150</option>
<option data-price="1500" value="Ram1500">Ram1500</option>
<option data-price="2000" value="chevy">chevy</option>
</select>
<br/>
</p>
Price : <input name='price' id='price'/>
Hope this helps.
I´m not expert with javascript & jquery, and I just googled for many days but can´t find the answer.
How can I populate a select with options selected from other selects. For this example from the 1st select I choose Manchester, from 2nd I choose Bogota and the 3rd must be populated with Manchester and Bogota:
Select One <br>
<select id="city" name="city">
<option value="0"></option>
<option value="1">Manchester</option>
<option value="2">Paris</option>
<option value="3">Madrid</option>
</select><br>
Select 2 <br>
<select id="city2" name="city2">
<option value="0"></option>
<option value="4">Bogota</option>
<option value="5">Buenos Aires</option>
<option value="6">Quito</option>
</select><br>
Select 3, populated whit the options of the previous 2 selects <br>
<select id="street" name="street">
<option value="0"></option>
<option value="1">Manchester</option>
<option value="4">Bogota</option>
</select>
Many thanks for help me.
The following jQuery will refresh the street select list any time a change is made to a select with class refresh on it.
function refreshList() {
$('#street option').remove(); //Clear the dropdown
$('#street').append('<option value="0"></option>'); //Add the blank option
$('.refresh').each(function() { //Loop through every instance of class 'refresh'
var v = $(this).val(); //Selected Value
var t = $(this).find('option[value="' + v + '"]').text(); //Selected Text
if (v != 0) { //If value isn't blank, add option to Street
$("#street").append('<option value="' + v + '">' + t + '</option>');
}
});
}
$(document).ready(function() { //When the page loads
$('.refresh').change(function() { //Initialize a click-event listener for class 'refresh'
refreshList(); //Run above function
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select One <br>
<select id="city" name="city" class="refresh">
<option value="0"></option>
<option value="1">Manchester</option>
<option value="2">Paris</option>
<option value="3">Madrid</option>
</select><br>
Select 2 <br>
<select id="city2" name="city2" class="refresh">
<option value="0"></option>
<option value="4">Bogota</option>
<option value="5">Buenos Aires</option>
<option value="6">Quito</option>
</select><br>
Select 3, populated with the options of the previous 2 selects <br>
<select id="street" name="street">
<option value="0"></option>
<option value="1">Manchester</option>
<option value="4">Bogota</option>
</select>
$('select#city').change(function() {
var $selected = $('option:selected', this).clone()//make a copy of selected option
$('#street').append($selected)//put the selected option in the 3rd select
})
$('select#city2').change(function() {
var $selected = $('option:selected', this).clone();//make a copy of selected option
$('#street').append($selected)//put the selected option in the 3rd select
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select One
<br>
<select id="city" name="city">
<option value="0"></option>
<option value="1">Manchester</option>
<option value="2">Paris</option>
<option value="3">Madrid</option>
</select>
<br>Select 2
<br>
<select id="city2" name="city2">
<option value="0"></option>
<option value="4">Bogota</option>
<option value="5">Buenos Aires</option>
<option value="6">Quito</option>
</select>
<br>Select 3, populated whit the options of the previous 2 selects
<br>
<select id="street" name="street">
<option value="0"></option>
</select>
Use .clone() to make a copy of selected option
Description: Create a deep copy of the set of matched elements.
Then use .append() to insert the cloned element to 3rd select
Description: Insert content, specified by the parameter, to the end of each element in the set of matched elements.
I'm trying to update the value of a select input when I change the value of another select input. I cannot get anything to happen on the page and want to make sure I don't have a syntax error or some other dumb thing in this code.
<div class="group">
<div class="inputs types">
<strong style="font-size:13px;">Category:</strong>
<select name="id" id="ctlJob">
<option value="1">Automotive</option>
<option value="2">Business 2 Business</option>
<option value="3">Computers</option>
<option value="4">Education</option>
<option value="5">Entertainment & The Arts</option>
<option value="6">Food & Dining</option>
<option value="7">Government & Community</option>
<option value="8">Health & Beauty</option>
<option value="9">Home & Garden</option>
<option value="10">Legal & Financial Services</option>
<option value="11">Professional Services</option>
<option value="12">Real Estate</option>
<option value="13">Recreation & Sports</option>
<option value="14">Retail Shopping</option>
<option value="15">Travel & Lodging</option>
</select>
<select name="type" id="ctlPerson"></select>
</div>
</div>
<script>
$(function() {
$("#ctlJob").change(function() {
//Get the current value of the select
var val = $(this).val();
$('#ctlPerson').html('<option value="123">ascd</option>');
});
});
</script>
Try using append instead:
$(function() {
$("#ctlJob").change(function() {
//Get the current value of the select
var val = $(this).val();
var ctl = $('#ctlPerson').append('<option value="123">'+val+'</option>')[0].options;
ctl.selectedIndex = ctl.length-1;
});
});
http://jsfiddle.net/J69q8/
I think you also need to set the 'selected' property. Add
$('#ctlPerson option[value="123"]').attr('selected', 'selected');
to the end of the script. You are currently adding the option to the select list, but are not changing the select list to show it.
<div id="test">
<select name="sel" id="sel">
<option name="1" id="1" value="1">Automotive</option>
<option name="2" id="1 value="2">Business 2 Business</option>
<option name="3" id="1 value="3">Computers</option>
</select>
<select name="sel2" id="sel2"></select>
</div>
<script>
$("#sel").change(function() {
var val = $(this).val();
$('#sel2').html('<option value="1">NEW</option>');
)};
</script>
this works fine for what you need to do.
it's something like what you have