I have this html
<div class="input-box">
<select id="billing:country_id" class="validate-select" name="billing[country_id]" title="Country">
<option value=""> </option>
</select>
</div>
<div class="input-box">
<select id="billing:region_id" class="validate-select" name="billing[region_id]" title="State">
<option value=""> </option>
</select>
</div>
<script type="text/javascript">
jQuery("#billing\\:country_id").select2({
placeholder: "Select a Country"
});
jQuery("#billing\\:region_id").select2({
placeholder: "Select State"
});
jQuery("#billing\\:country_id").change(function(){
jQuery("#billing\\:region_id").select2('destroy');
jQuery("#billing\\:region_id").select2({
placeholder: "Select a State"
});
});
</script>
but when I try to change the country dropdown I have this error:
TypeError: jQuery(...).select2 is not a function
jQuery("#billing\:region_id").select2('destroy');
I didn't see any error except that your whole function should be encapsulated inside jquery.To show demo, i just added 3 options.
$(function(){
$("#billing\\:country_id").select2({
placeholder: "Select a Country"
});
$("#billing\\:region_id").select2({
placeholder: "Select State"
});
$("#billing\\:country_id").change(function(){
$("#billing\\:region_id").select2('destroy');
$("#billing\\:region_id").select2({
placeholder: "Select a State"
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<div class="input-box">
<select id="billing:country_id" class="validate-select" name="billing[country_id]" title="Country">
<option value=""> </option>
<option value="1">option 1 </option>
<option value="2">option 2 </option>
<option value="3">option 3 </option>
</select>
</div>
<div class="input-box">
<select id="billing:region_id" class="validate-select" name="billing[region_id]" title="State">
<option value=""> </option>
<option value="1">option 1 </option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
</div>
Here is the JsFiddle Link.
Related
My function below is logging one value to console instead of 2 values. Ultimately My project will have multiple select elements and I need to pass the value of each select element through a function.
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div class="choice">
<select name="selecttype">
<option value="0">choice 1</option>
<option value="1">choice 2</option>
<option value="" selected>N/A</option>
</select>
</div>
<div class="choice">
<select name="selecttype">
<option value="0">choice 1</option>
<option value="1">choice 2</option>
<option value="" selected>N/A</option>
</select>
</div>
<button id="logvalues" type="submit" class="btn btn-success">log values to console</button>
Javascript:
$("#logvalues").click(function() {
$("option:selected").each(function(){
console.log($("option:selected").val());
});
})
You just need to pass the current context using this like:
$("#logvalues").click(function() {
$("option:selected").each(function() {
console.log( $(this).val() );
});
})
Demo:
$("#logvalues").click(function() {
$("option:selected").each(function() {
console.log($(this).val());
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div class="choice">
<select name="selecttype">
<option value="0">choice 1</option>
<option value="1">choice 2</option>
<option value="" selected>N/A</option>
</select>
</div>
<div class="choice">
<select name="selecttype">
<option value="0">choice 1</option>
<option value="1">choice 2</option>
<option value="" selected>N/A</option>
</select>
</div>
<button id="logvalues" type="submit" class="btn btn-success">log values to console</button>
Is there a way to get an array of all the selected values inside a div with a particular class name when having more than one div with the same class name?
<div class="mydiv">
<select name="first">
<option value="1">One</option>
<option value="2">Two</option>
</select>
<select name="second" ">
<option value="1">One</option>
<option value="2">Two</option>
</select> </div>
<div class="mydiv">
<select name="first">
<option value="1">One</option>
<option value="2">Two</option>
</select>
<select name="second" ">
<option value="1">One</option>
<option value="2">Two</option>
</select> </div>
If i do this: $(".mydiv").each(function (){ });
I will be looping(twice in total as I have two divs with class mydiv) through both divs which is what I want. Now I would like to get the selected values in each div for each select(first and second).
You can use map().
Following assumes you want a sub array for each <div>
let res = $('.mydiv').map(function(){
return [$(this).find('select').map(function(){
return $(this).val()
}).get()]
}).get()
console.log(res)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mydiv">
<select name="first">
<option value="1" selected>One</option>
<option value="2">Two</option>
</select>
<select name="second">
<option value="1">One</option>
<option value="2" selected>Two</option>
</select>
</div>
<div class="mydiv">
<select name="first">
<option value="1">One</option>
<option value="2" selected>Two</option>
</select>
<select name="second">
<option value="1">One</option>
<option value="2" selected>Two</option>
</select>
</div>
For a flat array just do :
let res = $('.mydiv select').map(function(){
return $(this).val();
}).get();
I have 2 select boxes. When I select an option on selectbox1, it automatically changes the corresponding value on selectbox2 regardless of value but order.
The thing is, the code is working fine until after a few tries. Then even if I change the option on selectbox1, it doesn't update the one on selectbox2.
To reproduce the issue; go through A to E, then repeat.
Code:
$(".firstSelectBox").change(function(e) {
var selectedOption = $("option:selected", this);
var idx = $(this).children().index(selectedOption)
var secChildIdx = $(".secondSelectBox").children()[idx];
$(".secondSelectBox").find(":selected").removeAttr('selected');
$(secChildIdx).attr("selected", "selected");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="control-group">
<div class="controls">
<label>First Selectbox</label><br/>
<select class="firstSelectBox validate[required]">
<option value="1">Select A</option>
<option value="2">Select B</option>
<option value="3">Select C</option>
<option value="4">Select D</option>
<option value="5">Select E</option>
</select>
</div>
</div>
<br />
<div class="control-group">
<div class="controls">
<label>Second Selectbox</label><br />
<select class="secondSelectBox validate[required]">
<option value="A">Select 1</option>
<option value="B">Select 2</option>
<option value="C">Select 3</option>
<option value="D">Select 4</option>
<option value="E">Select 5</option>
</select>
</div>
</div>
Also JSFiddle version: https://jsfiddle.net/153w074d/
No need for all that code, just work with selectedIndex:
$(".firstSelectBox").change(function(e) {
var selectedIndex = $(this).get(0).selectedIndex;
$(".secondSelectBox").get(0).selectedIndex = selectedIndex;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="control-group">
<div class="controls">
<label>First Selectbox</label><br/>
<select class="firstSelectBox validate[required]">
<option value="1">Select A</option>
<option value="2">Select B</option>
<option value="3">Select C</option>
<option value="4">Select D</option>
<option value="5">Select E</option>
</select>
</div>
</div>
<br />
<div class="control-group">
<div class="controls">
<label>Second Selectbox</label><br />
<select class="secondSelectBox validate[required]">
<option value="A">Select 1</option>
<option value="B">Select 2</option>
<option value="C">Select 3</option>
<option value="D">Select 4</option>
<option value="E">Select 5</option>
</select>
</div>
</div>
What happened in your original code is that, in some way, the selected attributes are being messed around. Try this: Change to each option from A to E, then start over from A, the selection stops working. Then inspect the second select to see that there are more than one option with selected="selected" attribute. Not sure what caused that tho.
#DontVoteMeDown's answer will certainly work, but the reason you're having this issue is because of the discrepancy between .prop and .attr. Both are similar, but don't refer to the same, identical underlying value.
If you change the below two lines to use the .prop value instead of .attr, your code will work. See the working code example below.
$(".secondSelectBox").find(":selected").removeAttr('selected'); // change to .removeProp
$(secChildIdx).attr("selected", "selected"); // change to .prop
$(".firstSelectBox").change(function(e) {
var selectedOption = $("option:selected", this);
var idx = $(this).children().index(selectedOption)
var secChildIdx = $(".secondSelectBox").children()[idx];
$(".secondSelectBox").find(":selected").removeProp('selected');
$(secChildIdx).prop("selected", "selected");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="control-group">
<div class="controls">
<label>First Selectbox</label><br/>
<select class="firstSelectBox validate[required]">
<option value="1">Select A</option>
<option value="2">Select B</option>
<option value="3">Select C</option>
<option value="4">Select D</option>
<option value="5">Select E</option>
</select>
</div>
</div>
<br />
<div class="control-group">
<div class="controls">
<label>Second Selectbox</label><br />
<select class="secondSelectBox validate[required]">
<option value="A">Select 1</option>
<option value="B">Select 2</option>
<option value="C">Select 3</option>
<option value="D">Select 4</option>
<option value="E">Select 5</option>
</select>
</div>
</div>
You can also use prop to select option.
$(".firstSelectBox").change(function(e) {
var selectedIndex = $(this).get(0).selectedIndex;
$('.secondSelectBox option:eq('+selectedIndex+')').prop('selected', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control-group">
<div class="controls">
<label>First Selectbox</label><br/>
<select class="firstSelectBox validate[required]">
<option value="1">Select A</option>
<option value="2">Select B</option>
<option value="3">Select C</option>
<option value="4">Select D</option>
<option value="5">Select E</option>
</select>
</div>
</div>
<br />
<div class="control-group">
<div class="controls">
<label>Second Selectbox</label><br />
<select class="secondSelectBox validate[required]">
<option value="A">Select 1</option>
<option value="B">Select 2</option>
<option value="C">Select 3</option>
<option value="D">Select 4</option>
<option value="E">Select 5</option>
</select>
</div>
</div>
I'm trying to make a a webpage that has a conditional dropdown box using html and javascript. Say it's a certain day in the week like Monday I need a different dropdown box with different options when it's Thursday; however some days may have the same options. Originally I had two drop down box one when the person clicked what day it was and then the dropdown box would appear, but I was wondering if there was a way to do this automatically using a javascript function and also creating a function that only displays a certain dropdown list.
<html>
<head></head>
<body>
<div id="myQuestions">
<select id="QuestionOptions">
<option value disalbe selected>What Day is it?</option>
<option value="A">Monday</option>
<option value="A">Tuesday</option>
<option value="B">Wednesday</option>
<option value="B">Thursday</option>
<option value="B">Friday</option>
<option value="A">Saturday</option>
<optoin value="A">Sunday</optoin>
</select>
</div>
<div id="myAnswers">
<div id="A" style="display: none;">
<div id="QuestionC">
<p>Exapmle of question.</p>
</div>
<div id="QuestionD">
<select id="QuestionOptionsD">
<option value disalbe selected>Choose Your Answer</option>
<option value="G">Answer G</option>
<option value="H">Answer H</option>
</select>
</div>
</div>
<div id="B" style="display: none;">
<div id="QuestionE">
<p>Exmaple of another question.</p>
</div>
<div id="QuestionF">
<select id="QuestionOptionsF">
<option value disalbe selected>Choose Your Answer</option>
<option value="I">Answer I</option>
<option value="J">Answer J</option>
</select>
</div>
</div>
</div>
</body>
</html>
If i understood your requirement correctly. This is what you are looking for using jquery
$("#QuestionOptions").change(function(){
$("#A,#B").hide();
if($(this).val() == "A"){
$("#A").show();
}else{
$("#B").show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head></head>
<body>
<div id="myQuestions">
<select id="QuestionOptions">
<option value disalbe selected>What Day is it?</option>
<option value="A">Monday</option>
<option value="A">Tuesday</option>
<option value="B">Wednesday</option>
<option value="B">Thursday</option>
<option value="B">Friday</option>
<option value="A">Saturday</option>
<optoin value="A">Sunday</optoin>
</select>
</div>
<div id="myAnswers">
<div id="A" style="display: none;">
<div id="QuestionC">
<p>Exapmle of question.</p>
</div>
<div id="QuestionD">
<select id="QuestionOptionsD">
<option value disalbe selected>Choose Your Answer</option>
<option value="G">Answer G</option>
<option value="H">Answer H</option>
</select>
</div>
</div>
<div id="B" style="display: none;">
<div id="QuestionE">
<p>Exmaple of another question.</p>
</div>
<div id="QuestionF">
<select id="QuestionOptionsF">
<option value disalbe selected>Choose Your Answer</option>
<option value="I">Answer I</option>
<option value="J">Answer J</option>
</select>
</div>
</div>
</div>
</body>
</html>
Check out my JSFidle. Most of code on javascript, remove some html element that doesn't needed.
With Dynamic options
var dynamic_options = {
'A': [{
value: "1",
text: "Option 1"
}, {
value: "2",
text: "Option 2"
}],
'B': [{
value: "3",
text: "Option 3"
}, {
value: "4",
text: "Option 4"
}]
};
$(function() {
var answers = $('#myAnswers').find('select');
$('#myQuestions').on('change', 'select', function(e) {
var options = dynamic_options[this.value] || [];
answers.find('option:gt(0)').remove();
$.each(options, function(i, option) {
answers.append($('<option>').prop(option));
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myQuestions">
<select>
<option value=''>What Day is it?</option>
<option value="A">Monday</option>
<option value="A">Tuesday</option>
<option value="B">Wednesday</option>
<option value="B">Thursday</option>
<option value="B">Friday</option>
<option value="A">Saturday</option>
<optoin value="A">Sunday</optoin>
</select>
</div>
<div id="myAnswers">
<div>
<p>Exapmle of question.</p>
</div>
<div>
<select>
<option value=''>Choose Your Answer</option>
</select>
</div>
</div>
BTW, to disable an option in select, use attribute disabled, whereas you have used disalbe.
The following code makes the option selected when the value is matched with the option value.
<html>
<head></head>
<body>
<label>Quantity:</label><br><br>
<select name="qty" id="qty">
<option value="50">50</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="250">250</option>
<option value="300">300</option>
<option value="350">350</option>
<option value="400">400</option>
<option value="450">450</option>
<option value="500">500</option>
</select>
<script>
$(document).ready(function(){
$('#qty option[value={{ $qty }}]').attr('selected','selected');
});
</script>
</body>
</html>
I have these 3 dropdownlist. I want to show only 1 dropdownlist according to values selected in the first DDL. can someone help me with this :
HTML :
<div class="field">
<label for="message_for">Message For</label>
<select id="message_for" name="message_for" title="Message For" >
<option value='shop'>Shops</option>
<option value='offers'>Offers</option>
<option value='events'>Events</option>
<option value='consultancy'>Consultancy</option>
</select>
</div>
<div class="field1">
<label for="message_type">Message Type</label>
<select id="offer_type" name="offer_type" title="Offer Type" >
<option value='special'>Special</option>
<option value='recommend'>Recommended</option>
<option value='day'>Offer of the Day</option>
<option value='hot'>Hot Offer</option>
</select>
</div>
<div class="field2">
<label for="message_type">Message Type</label>
<select id="shop_type" name="shop_type" title="Shop Type" >
<option value='mall'>Mall</option>
<option value='warehouse'>Warehouse</option>
<option value='food'>Food</option>
<option value='banquet'>Banquet</option>
<option value='service'>Service</option>
<option value='cosmetics'>Cosmetics</option>
<option value='fashion'>Fashion</option>
</select>
</div>
<div class="field3">
<label for="message_type">Message Type</label>
<select id="event_type" name="event_type" title="Event Type" >
<option value='social'>Social</option>
<option value='other'>Other</option>
</select>
</div>
Means if i select shops in first DDL then the second DDL should be DIV field2
Basically, the idea is to get the value of message_for select using jquery and show or hide other selects based on its value.
$("#message_for").on("change", function(){
if($(this).val() == "shop"){
$(".field1").show();
}
//here add more cases to show relevant selects
});
I have created this jsfiddle for you - https://jsfiddle.net/guranjanpsingh/h9prdxyy/2/
The easiest way is to add classes to divs with the same name as option values in order to target them.
$('div:not(".general")').hide();
$('#message_for').on('change', function() {
$('div:not(".general")').hide();
$('.' + $(this).val()).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="general">
<label for="message_for">Message For</label>
<select id="message_for" name="message_for" title="Message For">
<option value=''>Please Select</option>
<option value='shop'>Shops</option>
<option value='offers'>Offers</option>
<option value='events'>Events</option>
<option value='consultancy'>Consultancy</option>
</select>
</div>
<div class="shop">
<label for="message_type">Message Type</label>
<select id="offer_type" name="offer_type" title="Offer Type">
<option value='special'>Special</option>
<option value='recommend'>Recommended</option>
<option value='day'>Offer of the Day</option>
<option value='hot'>Hot Offer</option>
</select>
</div>
<div class="offers">
<label for="message_type">Message Type</label>
<select id="shop_type" name="shop_type" title="Shop Type">
<option value='mall'>Mall</option>
<option value='warehouse'>Warehouse</option>
<option value='food'>Food</option>
<option value='banquet'>Banquet</option>
<option value='service'>Service</option>
<option value='cosmetics'>Cosmetics</option>
<option value='fashion'>Fashion</option>
</select>
</div>
<div class="events">
<label for="message_type">Message Type</label>
<select id="event_type" name="event_type" title="Event Type">
<option value='social'>Social</option>
<option value='other'>Other</option>
</select>
</div>