This is the jQuery code that I am using which helps me in getting the values for a select box I need when I change the first select box.
$(document).ready(function () {
$("#select1").change(function(){
$('.quantity').val('');
$('#trblock').fadeIn();
if ($(this).data('options') == undefined) {
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html('<option value="">').append(options);
});
});
What happens here is that whenever I change the select box value from 1st select box I get some values in the second select box. But when I roll back to the previously selected option in the 1st text box I find that the 2nd select box is already showing the options which I selected previously. What I want is whenever I change selecting the 1st select box option the 2nd select box should start with a blank option like <option value=""></option> instead of the previously selected option in 2nd select box.
To make it easy I roll it in points.
Selected an option in 1st select box example "Animals".
<select name="" id="select1">
<option value=""></option>
<option value="1">Animals</option>
<option value="2">Games</option>
<option value="3">Fruits</option>
</select>
Got some values in 2nd select box.
<select name="" id="select2">
<option value=""></option>
<option value="1">Cat</option>
<option value="2">Dog</option>
<option value="3">Monkey</option>
</select>
Selected a value from the 2nd select box example "Dog".
Then I thought to switch the selection from 1st select box so I selected "Fruits".
Got some values in 2nd select box.
<select name="" id="select2">
<option value=""></option>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Grapes</option>
</select>
I selected grapes this time. Ok, fine till here.
But then if I again change my 1st selection to animals I should get the 2nd select box to start with the empty option (blank field) but Instead it starts with the previously selected "Dog". This is what I DO NOT want. Each time I change selecting the option from 1st select box I want second select box to start with the blank option field so that I can again choose from the full list i.e., "Cat", "Dog", "Monkey".
Add $('#select2').val('') at the last of select1's change event like following.
$("#select1").change(function () {
$('.quantity').val('');
$('#trblock').fadeIn();
if ($(this).data('options') == undefined) {
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html('<option value="">').append(options);
$('#select2').val(''); //add this line
});
Related
I have the following code
<select class="needsclick" id="country" name="order[country]">
<option value="USA" selected="selected">USA</option>
<option value="CANADA">CANADA</option>
</select>
I could do the following javascript command to change the option value
document.getElementById("country").value = 'CANADA'
however, this does not change the selected value and does not change the state box to province.
When I physically click this dropdown menu and change to CANADA, the effects of the change take place (the state box changes to province)
I am using Swift iOS to parse HTML and wondering what line of javascript code is needed to click a option value rather than changing the option value?
If I do the following after changing the value
document.getElementById("country").click()
it just clicks the menu but still does not change the state box to province (happens when physically clicking the option value)
How can I achieve this using a javascript command like the two above?
The state/province box is irrelevant to the code just relevant to the fact it changes when the dropdown is physically clicked and not when programmatically changed.
I can do the following code but it still does not change the state box to province (only if physically clicked)
document.getElementById("country")[1].selected = true
To work with the option elements within a select, you must access the options node list and then select one to work with.
Setting the value is separate from setting the selected flag.
var countries = document.getElementById("country");
var states = document.getElementById("provincesUSA");
var territories = document.getElementById("provincesCanada");
countries.addEventListener("change", function(e) { update(e); });
function update(e){
// show the correct sub-list based on the selected option
var country = countries[countries.selectedIndex];
if(country.value === "USA"){
states.classList.remove("hidden");
territories.classList.add("hidden");
} else if(country.value === "CANADA") {
territories.classList.remove("hidden");
states.classList.add("hidden");
} else {
territories.classList.add("hidden");
states.classList.add("hidden");
}
}
// To dynamically choose
document.querySelector("button").addEventListener("click", function(){
countries.options[2].selected = "selected"; // Canada
// Simulate the change event
update(countries);
});
#provincesUSA.hidden, #provincesCanada.hidden { display:none; }
<select class="needsclick" id="country" name="order[country]">
<option value="" selected="selected">Choose A Country</option>
<option value="USA">USA</option>
<option value="CANADA">CANADA</option>
</select>
<select id="provincesUSA" class="hidden" name="states">
<option value="al">Alabama</option>
<option value="ar">Arkansas</option>
</select>
<select id="provincesCanada" class="hidden" name="territories">
<option value="on">Ontario</option>
<option value="qu">Quebec</option>
</select>
<button>Force A Selection (click me whe CANADA is NOT selected)</button>
document.getElementById("country").selectedIndex = 2;
Im new to this so apologies if my question is not presented as it should be.
Basically, my aim is with jQuery is to make it so that when the field called 'Apple' is selected from the first dropdown box, the second dropdown box will only allow the field 'Firm' to be selected and the other two be disabled. However if any of the other fruits other than 'Apple' is selected from the first dropdown box then all of the options in the second dropdown box (texture dropdown) will be available to be chosen.
I have looked all over the internet for jQuery code to help me with this issue but as I am new to jQuery I have difficulty finding the solution I need.
Here is my HTML code:
<div class="ingredients_div">
<select name="ingredients_form" id="ingredients_form_1">
<option value="Apple" selected="">Apple</option>
<option value="Orange">Orange</option>
<option value="Lemon">Lemon</option>
<option value="Mango">Mango</option>
</select>
</div>
<div class="texture_div">
<select name="texture_form" id="texture_form_1">
<option value="Firm" selected="">Firm</option>
<option value="Soft">Soft</option>
<option value="Blended">Blended</option>
</select>
</div>
Many thanks
please check this code , i think it works for you.
$("#select1").change(function() {
if ($(this).data('options') == undefined) {
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="select1" id="select1">
<option value="1">Apple</option>
<option value="2">Orange</option>
<option value="3">Lemon</option>
</select>
<select name="select2" id="select2">
<option value="1">Firm</option>
<option value="2">Soft</option>
<option value="3">Blended</option>
</select>
To achieve what you mentioned, you need to use jQuery's event binding on the first select box. As soon as the value is changed, you need to write logic to enable/disable options in the second select box as per the value changed in the first box.
Here is how you can achieve it.
$("#ingredients_form_1").change(function() {
if ($(this).val() === "Apple") {
$("#texture_form_1 option").prop("disabled", true);
$("#texture_form_1 option[value='Firm']").prop("disabled", false);
} else {
$("#texture_form_1 option").prop("disabled", false);
}
});
Please go through jQuery's documentation to know more about selectors, event binding, and most importantly, in the next post, include what you've achieved till then.
I am learning a jQuery.My question is When I click on edit button then particular dropdown value show which I selected. This selected value I want to store in jQuery so how can I store it?I have attached image please help me.
$('select').val() would get you the value attribute.
In case you want the text of selected option use $('select').find(':selected').text().
Here is an example:
$(function() {
//Get the selected value
console.log($('.service_select').val());
//Captures the selected value when the selection changes
$('.service_select').change(function() {
console.log($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="service_select" class="service_select">
<option value="0">-- Select --</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
try with
For Selected Value
var selected_value= $('.service_select').val();
For all options values of dropdown
var all_values= $('.service_select option').map(function(obj){
return $(obj).attr('value');
});
For all options values with key value pair
var all_values= {};
$('.service_select option').each(function(){
all_values[$(this).attr('value')]=$(this).text();
});
I have 2 dropdowns. When you select the Handling unit from the first dropdown $("#HandlingUnit"), it should read the text of the label for the selected option group, then change the second based on on the text of the option....
Example Scenario:
Select 2222 from $("#HandlingUnit"), it reads the optgroup label "Cases" and changes $("#HUType") to "Cases"
Select P00001 from $("#HandlingUnit"), it reads the optgroup label "Pallets" and changes $("#HUType") to "Pallets"
Select 1111 (or 2222) from $("#HandlingUnit"), it does not change to Cases.
This works great for 2 changes, however the third time, the second dropdown does not change.
<label class="label_long" for="HandlingUnit">Handling Unit:</label>
<select id="HandlingUnit" required="" name="HandlingUnit">
<optgroup id="Pallets" label="Pallets">
<option value="P00001">P00001</option>
</optgroup>
<optgroup id="Cases" label="Cases">
<option value="1111">1111</option>
<option value="2222">2222</option>
</optgroup>
</select>
<label class="label_long" for="HuType">Handling Unit Type: </label>
<select id="HUType" name="HUType">
<option value="1" name="Pallets"> Pallets </option>
<option value="0" name="Case" selected="selected"> Cases </option>
<option value="3" name="Items"> Items </option>
</select>
Javascript/jQuery:
$(document).on("change", "select#HandlingUnit", function() {
var selected = $(":selected", this).parent().attr('label');
$("#HUType").find("option:selected").removeAttr("selected");
$("#HUType option").filter(function() {
console.log(this.text.trim() + " >> " + selected);
return this.text.trim() == selected;
}).attr("selected", true)
});
JSFiddle
Edit: JSFiddle is not responding how it does inside my application, so I'm thinking there might be something bigger going on... Looking into it will report back if I find anything.
You can use .val(function)
A function returning the value to set. this is the current element. Receives the index position of the element in the set and the old value as arguments.
Code
$(document).on("change", "select#HandlingUnit", function() {
var selected = $(":selected", this).parent().attr('label');
//Find option with selected label and set its value
$("#HUType").val(function(){
return $(this).find('option[name="' + selected +'"]').val();
});
});
$("select#HandlingUnit").trigger("change"); //Trigger on page load
DEMO
Say I want to create a double drop down select options where the second drop down list changes according to which the first drop down option is selected. I've already figured out how to do this. BUT one of my first drop option is "Others" and I want an input textbox to appear if I select "others" in the first dropdown list instead of having a second drop down option list. So far, I've been able to get the input textbox to appear, but the second drop down option list also appears (as undefined). How do I make the second drop down option list disappear?? Also, if one of the options in the first dropdown list doesn't need or have a second drop down option list, how do I code this?
This is an example of my script (I only changed the names of the categories):
<form name="search" method="get">
<select name="cat" id="cat" size="1" onChange="redirect(this.options.selectedIndex)">
<option selected disabled>Category</option>
<option value="fruit">Fruit</option>
<option value="music">Music</option>
<option value="vegetable">Vegetable</option>
<option value="book">Book</option>
<option value="other">Other</option>
</select>
<input type='text' id="other" class="hidden" />
<select name="cat2" size="1">
<option selected disabled>Sub-category</option>
</select>
<input type="button" name="Search" value="Search" onClick="go()" /
</form>
This is my javascript:
$('#cat').change(function(){
var selected_item = $(this).val()
if(selected_item == "other"){
$('#other').val("").removeClass('hidden');
}else{
$('#other').val(selected_item).addClass('hidden');
}
});
var groups=document.search.cat.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()
group[0][0]=0
group[1][0]=new Option("Moodle")
group[1][1]=new Option("Ultranet")
group[1][2]=new Option("Private School")
group[2][0]=new Option("Gmail")
group[2][1]=new Option("Windows Live")
group[2][2]=new Option("Office 365")
group[3][0]=0 //has no second dropdown option, how do I make it disappear?
group[4][0]=new Option("Kamar")
group[4][1]=new Option("Musac")
group[5][0]=new Option("Windows")
group[5][1]=new Option("Mac")
group[5][2]=new Option("Novell")
group[5][3]=new Option("Linux")
group[6][0]=new Option("Ruckus Wireless")
group[6][1]=new Option("Aerohive Networks")
group[6][2]=new Option("Aruba Networks")
group[7][0]=new Option("Pre-Trial")
group[7][1]=new Option("Implementation")
group[7][2]=new Option("Full Trial")
group[8][0]=0 //The 'others', I don't know what to put here to make this disappear
var temp=document.search.cat2
function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}
function go(){
location=temp.options[temp.selectedIndex].value
}
You need to add 2 new lines to the .change function, from:
$('#cat').change(function(){
var selected_item = $(this).val()
if(selected_item == "other"){
$('#other').val("").removeClass('hidden');
}else{
$('#other').val(selected_item).addClass('hidden');
}
});
Change it to
$('#cat').change(function(){
var selected_item = $(this).val()
if(selected_item == "other"){
$('#other').val("").removeClass('hidden');
$("select[name=cat2]").addClass('hidden');
}else{
$('#other').val(selected_item).addClass('hidden');
$("select[name=cat2]").removeClass('hidden');
}
});
So when you remove hidden class from the input you have to add it to the select with name "cat2", and vice-versa. Hope this helps you.