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 have multiple select option dropdowns and want to use local storage to save the user's choices once they have been selected. This is an example of the HTML:
<div class="sel_container">
<select onchange="saveChoice()" id="select_color" class="test">
<option value="">Choose color</option>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="green">green</option>
</select>
<select id="select_type" class="test" onchange="saveChoice()">
<option value="">Choose size</option>
<option value="small">small</option>
<option value="medium">medium</option>
</select>
</div>
I used this code from another post I found and it works to save one of the selections:
$(function() {
$('#select_color').change(function() {
localStorage.setItem('todoData', this.value);
});
if(localStorage.getItem('todoData')){
$('#select_color').val(localStorage.getItem('todoData'));
}
});
I am new with javascript and after doing some reading it seems like I need to do a JSON stringify, but I am really confused about the syntax of this. I tried using this and it does not work:
var obj = {
"#select_color": this.value,
"#select_type": this.value
}
var stringifyObj = JSON.stringify(obj);
Any help with this is much appreciated! Thanks!
You don't need to use an object nor JSON for this specifically. What you could do is improve your code by making it more generic so that it works for any instance of a select.
You have given them both the .test class, so you can select by that. You can then set the value in localstorage keyed by the id of the select, which can be retrieved on page load. Try this;
$('.test').change(function() {
localStorage.setItem(this.id, this.value);
}).val(function() {
return localStorage.getItem(this.id)
});
Working example
Here iam trying to get values based on #category selection when i select a category men or women,following select option should show the relevant options.what i did satisfied my requirement but when i try to access it using keyboard(down arrow) it shows all the options of the #subcategory.here is the code and fiddle.any help is thankful.
my fiddle http://jsfiddle.net/JUGWU/
HTML:
<select id="category" name="category">
<option>-select-</option>
<option value="MEN" id="menu1">MEN</option>
<option value="WOMEN" id="menu2">WOMEN</option>
</select>
<br>
<select id="subcategory">
<option></option>
<option id="Clothing" value="Clothing">Clothing</option>
<option id="Accessories" value="Accessories">Accessories</option>
<option id="Footwear" value="Footwear">Footwear</option>
<option id="Watches" value="Watches">Watches</option>
<option id="Sunglasses" value="Sunglasses">Sunglasses</option>
<option id="Bags" value="Bags">Bags</option>
</select>
Jquery:
$(document).ready(function(){
$("#category").change(function() {
var xyz = $("option:selected").attr("id");
alert(xyz);
if(xyz === "menu1"){
$("#subcategory option").hide();
$("#Clothing,#Footwear").show();
}
});
});
Try this in your conditional. The disabled property doesn't allow keyboard selection. Seems to work for me.
$("#subcategory option").prop('disabled', true).hide();
$("#Clothing,#Footwear").prop('disabled', false).show();
Also, your logic breaks if a user switches from men to women.
This answer is not exactly addressing your problem (using keyboard(down arrow)) but I think it is IMHO a better way to do what you want. And also I used the fixed part from #user2301903 answer, just to make my point. my main point here was using the markup attributes.
We can use our markup attributes to have less complexity, I changed your markup like this (added a catg attribute):
<select id="category" name="category">
<option>-select-</option>
<option value="MEN" id="menu1" catg="m">MEN</option>
<option value="WOMEN" id="menu2" catg="w">WOMEN</option>
</select>
<br>
<select id="subcategory">
<option></option>
<option id="Clothing" value="Clothing" catg="m">Clothing</option>
<option id="Accessories" value="Accessories" catg="w">Accessories</option>
<option id="Footwear" value="Footwear" catg="m">Footwear</option>
<option id="Watches" value="Watches" catg="w">Watches</option>
<option id="Sunglasses" value="Sunglasses" catg="w">Sunglasses</option>
<option id="Bags" value="Bags" catg="w">Bags</option>
</select>
and your code like this:
$(document).ready(function () {
$("#category").change(function () {
var catg = $("option:selected").attr("catg");
//from #user2301903 answer
$("#subcategory option").prop('disabled', true).hide();
$("option[catg=" + catg + "]").prop('disabled', false).show();
});
});
and this is your working DEMO;
and this one is another way of doing what you want which works even in IE: IE_DEMO
I want set a dropdown(select) to be change based on the value of the entries.
I have
<select id="mySelect">
<option value="ps">Please Select</option>
<option value="ab">Fred</option>
<option value="fg">George</option>
<option value="ac">Dave</option>
</select>
And I know that I want to change the dropdown so that the option with the value of "fg" is selected. How can I do this with JQuery?
You should use
$('#dropdownid').val('selectedvalue');
Here's an example:
$('#dropdownid').val('selectedvalue');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdownid'>
<option value=''>- Please choose -</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='selectedvalue'>There we go!</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>
$('#yourdropddownid').val('fg');
Optionally,
$('select>option:eq(3)').attr('selected', true);
where 3 is the index of the option you want.
Live Demo
$('#mySelect').val('fg');...........
$('#mySelect').val('ab').change();
// or
$('#mySelect').val('ab').trigger("change");
You can use this jQuery code which I find it eaiser to use:
$('#your_id [value=3]').attr('selected', 'true');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="your_id" name="name" class="form-control input-md">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
<option value="4">Option #4</option>
<option value="5">Option #5</option>
<option value="6">Option #6</option>
<option value="7">Option #7</option>
</select>
You can simply use:
$('#select_id').val('fg')
In your case $("#mySelect").val("fg") :)
May be too late to answer, but at least some one will get help.
You can try two options:
This is the result when you want to assign based on index value, where '0' is Index.
$('#mySelect').prop('selectedIndex', 0);
don't use 'attr' since it is deprecated with latest jquery.
When you want to select based on option value then choose this :
$('#mySelect').val('fg');
where 'fg' is the option value
$('#dropdownid').val('selectedvalue');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdownid'>
<option value=''>- Please choose -</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='selectedvalue'>There we go!</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>
This code worked for me:
$(function() {
$('[id=mycolors] option').filter(function() {
return ($(this).text() == 'Green'); //To select Green
}).prop('selected', true);
});
With this HTML select list:
<select id="mycolors">
<option value="1">Red</option>
<option value="2">Green</option>
<option value="3">Blue</option>
</select>
I have a different situation, where the drop down list values are already hard coded. There are only 12 districts so the jQuery Autocomplete UI control isn't populated by code.
The solution is much easier. Because I had to wade through other posts where it was assumed the control was being dynamically loaded, wasn't finding what I needed and then finally figured it out.
So where you have HTML as below, setting the selected index is set like this, note the -input part, which is in addition to the drop down id:
$('#project-locationSearch-dist-input').val('1');
<label id="lblDistDDL" for="project-locationSearch-input-dist" title="Select a district to populate SPNs and PIDs or enter a known SPN or PID." class="control-label">District</label>
<select id="project-locationSearch-dist" data-tabindex="1">
<option id="optDistrictOne" value="01">1</option>
<option id="optDistrictTwo" value="02">2</option>
<option id="optDistrictThree" value="03">3</option>
<option id="optDistrictFour" value="04">4</option>
<option id="optDistrictFive" value="05">5</option>
<option id="optDistrictSix" value="06">6</option>
<option id="optDistrictSeven" value="07">7</option>
<option id="optDistrictEight" value="08">8</option>
<option id="optDistrictNine" value="09">9</option>
<option id="optDistrictTen" value="10">10</option>
<option id="optDistrictEleven" value="11">11</option>
<option id="optDistrictTwelve" value="12">12</option>
</select>
Something else figured out about the Autocomplete control is how to properly disable/empty it. We have 3 controls working together, 2 of them mutually exclusive:
//SPN
spnDDL.combobox({
select: function (event, ui) {
var spnVal = spnDDL.val();
//fire search event
$('#project-locationSearch-pid-input').val('');
$('#project-locationSearch-pid-input').prop('disabled', true);
pidDDL.empty(); //empty the pid list
}
});
//get the labels so we have their tool tips to hand.
//this way we don't set id values on each label
spnDDL.siblings('label').tooltip();
//PID
pidDDL.combobox({
select: function (event, ui) {
var pidVal = pidDDL.val();
//fire search event
$('#project-locationSearch-spn-input').val('');
$('#project-locationSearch-spn-input').prop('disabled', true);
spnDDL.empty(); //empty the spn list
}
});
Some of this is beyond the scope of the post and I don't know where to put it exactly. Since this is very helpful and took some time to figure out, it's being shared.
Und Also ... to enable a control like this, it's (disabled, false) and NOT (enabled, true) -- that also took a bit of time to figure out. :)
The only other thing to note, much in addition to the post, is:
/*
Note, when working with the jQuery Autocomplete UI control,
the xxx-input control is a text input created at the time a selection
from the drop down is picked. Thus, it's created at that point in time
and its value must be picked fresh. Can't be put into a var and re-used
like the drop down list part of the UI control. So you get spnDDL.empty()
where spnDDL is a var created like var spnDDL = $('#spnDDL); But you can't
do this with the input part of the control. Winded explanation, yes. That's how
I have to do my notes or 6 months from now I won't know what a short hand note means
at all. :)
*/
//district
$('#project-locationSearch-dist').combobox({
select: function (event, ui) {
//enable spn and pid drop downs
$('#project-locationSearch-pid-input').prop('disabled', false);
$('#project-locationSearch-spn-input').prop('disabled', false);
//clear them of old values
pidDDL.empty();
spnDDL.empty();
//get new values
GetSPNsByDistrict(districtDDL.val());
GetPIDsByDistrict(districtDDL.val());
}
});
All shared because it took too long to learn these things on the fly. Hope this is helpful.
You can select dropdown option value by name
// deom
jQuery("#option_id").find("option:contains('Monday')").each(function()
{
if( jQuery(this).text() == 'Monday' )
{
jQuery(this).attr("selected","selected");
}
});
$('select#myselect option[value="ab"]')
either can be used to get the selected option value
$('#dropdownID').on('change', function () {
var dropdownselected=$("#dropdownID option:selected").val();
});
or
$('#dropdownID').on('change', function () {
var dropdownselected=this.selectedOptions[0].value;
});
i have a form that has select element
<select name="adddisplaypage[]" id="adddisplaypage" multiple="multiple">
<option value="all" label="all">all</option>
<option value="index" label="index">index</option>
<option value="tour" label="tour">tour</option>
<option value="aboutus" label="about us">about us</option>
<option value="contactus" label="contact us">contact us</option>
<option value="destination" label="destination">destination</option>
<option value="reservation" label="reservation">reservation</option>
</select>
can anyone help me to select this option (multiple select) on click i.e the option gets selected when clicked, and deselected if selected on click.
I realized I may have misunderstood your question. Something like the following should work, though I'm not sure about browser support:
$('#adddisplaypage option').click(function(e) {
e.preventDefault();
var self = $(this);
if(self.attr('selected') == '') {
self.attr('selected', 'selected');
} else {
self.attr('selected', '');
}
});
In your click() handler, you could write something like:
$("#adddisplaypage").val("index");
That should select "index", for example.
You can pass an array to the .val() method. For instance:
$('#adddisplaypage').val(['index', 'tour']);