i am playing some show/hide function using my select drop down. Here is the html for select,
<select id="sel1" size="1" name="">
<option selected="selected" value="0">Select Here</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
Here is my jquery,
$(document).ready(function(){
$("#sel1").change(fun);
});
function fun(){
var selected = $("#sel1 option:selected");
if(selected.val() == 1) {
$("#div1").slideDown("slow");
$('#div2').slideUp("slow");
} else if(selected.val() == 2) {
$("#div1").slideUp("slow");
$('#div2').slideDown("slow");
} else {
$("#div1").slideUp("slow");
$('#div2').slideUp("slow");
}
};
But after the value sent to the server and return back, I want to retain the div1 or div2 based on the value select in the dropdown. But as of now, both the div are not displaying because of display=none at initial level. Any way to retain this?
If your HTML is generated using a server-side language, your best option would be to only add the display: none CSS property to them when appropriate. Alternatively, you could just trigger the change event handler when the DOM is ready, using:
$(document).ready(function(){
$("#sel1").change(fun).trigger('change');
});
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;
Good day
I require some aid with this issue.
I have a "Location1" dropdown with about 10 options. I then have a div class I would like to show if the user selects "Other".
Code:
<script>
$(document).ready(function(){
$("#Location1").on('change' function(){
if (this.value == 'Other') {
$(".otherlocation1").show();
}
else {
$(".otherlocation1").hide();
}
});
});
</script>
It's supposed to hide div class "otherlocation1" on by default, and then show "otherlocation1" based on a selection from the "Location1" text box.
Only problem is, it's not working. I've tried numerous other ways and can't get it working.
Any help would be appreciated.
You are missing a , after change. Try this:
$(document).ready(function() {
$("#Location1").on('change', function() {
if (this.value == 'Other') {
$(".otherlocation1").show();
} else {
$(".otherlocation1").hide();
}
});
});
.otherlocation1{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='Location1'>
<option disabled selected>Select an option</option>
<option value='Other'>Other</option>
<option value='Other 2'>Other 2</option>
<option value='Other 3'>Other 3</option>
<option value='Other 4'>Other 4</option>
<option value='Other 5'>Other 5</option>
</select>
<p class='otherlocation1'>otherlocation1</p>
In Jquery the on function takes two parameters.
events
handler
So when you call the on function you pass the event and the handler separated by a comma ',' . Refer this for more info.
Thus refactor your line as follows
$("#Location1").on('change', function()
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 a select box on a web form that, depending on what is selected, will show a hidden div.
<script>
$(document).ready(function () {
$("#Select1").change(function () {
$(this).find("option:selected").each(function(){
if($(this).attr("Value")=="2"){
$("#hiddentable11").show();
}
else if($(this).attr("Value")=="3"){
$("#hiddentable11").show();
}
else{
$("#hiddentable11").hide();
}
});
}).change();
});
</script>
The form will have 35 to 40 of these Select box/hidden div combinations. The option values in the select boxes will all be the same every time (0,1,2,3,4). If the user chooses option 2 or 3 for Select1, hiddentable11 appears. If they choose option 2 or 3 for Select2, hiddentable 12 appears I don't want to copy/paste this code 40 times and in the code change Select1/hiddentable11 to Select2/hiddentable12, Select3/hiddentable13 etc. How do I change this code so that I can reuse it for all of the select/div combinations?
Give all the select boxes a class, e.g. class="select". Then you can usethis.id` to get the ID of the target element, and concatenate it to the DIV id.
$(".select").change(function() {
var num = this.id.slice(6); // get N from id="SelectN"
$("#hiddentable1" + num).toggle($(this).val() == "2" || $(this).val() == "3"));
});
Then just make a .Select class, and use this, pass in the corresponding hidden table as a user defined unique data attribute (I'll use data-hidden as an example). Then you can create the proper selector for each item by doing "#"+$(this).attr("data-hidden"):
$(".Select").change(function () {
$(this).find("option:selected").each(function(){
if($(this).attr("Value")=="2") {
$("#"+$(this).attr("data-hidden")).show();
}
else if($(this).attr("Value")=="3") {
$("#"+$(this).attr("data-hidden")).show();
}
else {
$("#"+$(this).attr("data-hidden")).hide();
}
});
}).change();
Try this. With this you don't need to depend on ID's. You may multiple select boxes to your code and table combo and never have to change your js code.
<select id="select1">
<option val="0">0</option>
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
<option val="4">4</option>
</select>
<div id="hiddentable11">
Hidden Contents of Select1
</div>
<select id="select2">
<option val="0">0</option>
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
<option val="4">4</option>
</select>
<div id="hiddentable12">
Hidden Contents of Select2
</div>
<select id="select3">
<option val="0">0</option>
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
<option val="4">4</option>
</select>
<div id="hiddentable13">
Hidden Contents of Select3
</div>
$("select").change(function () {
var index = $('select').index($(this));
index++;
var $this = $(this).find("option:selected").val();
$("#hiddentable1" + index).css("display", $this === "2" || $this === "3" ? "inline-block" : "none");
});
http://jsfiddle.net/njzatgku/1/
I am using a lightbox called featherlight. I have a form inside of that lightbox that requires a dynamic select option to change the content of the next question select box.
The select box works outside of the lightbox yet inside it fails.
Any ideas where I appear to be going wrong?
<select>
<option value="111">111</option>
<option value="222">222</option>
</select>
<select>
<option value="111">111</option>
<option value="222">222</option>
</select>
<script type="text/javascript">
$(function(){
$('select').change(function(){ // when one changes
$('select').val( $(this).val() ) // they all change
})
})
</script>
Your HTML is most likely being added after the handlers are bound - you can use .on to get around this:
$(document).on("change", "select", function() {
$('select').val( this.value )
});
You should replace document with a container that is present at the time of page load and contains your dynamic content - else this event is going to fire each time the document is changed (and check if a select was actually changed)
With a common class:
<select class="common">
<option value="111">111</option>
<option value="222">222</option>
</select>
<select class="common">
<option value="111">111</option>
<option value="222">222</option>
</select>
$(document).on("change", "select.common", function() {
$("select.common").not(this).val( this.value ) //added .not(this) since we dont need to change the value of the select being interacted with
});
have unique id for both select as follow
<select id='select1'>
<option value="111">111</option>
<option value="222">222</option>
</select>
<select id='select2'>
<option value="111">111</option>
<option value="222">222</option>
</select>
<script type="text/javascript">
$(function(){
$('#select1').change(function(){ // when one changes
$('#select2').val( $(this).val() ) // they all change
})
})
</script>
Updated
I guess you are accessing parent element from child window
try the following
window.parent.$(#select2.val( $(this).val());