I dynamically created a div with select options in jQuery. Here's a sample.
<div id="myDiv">
<select id="mySelect">
<option selected value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
</select>
</div>
0 is the default selected value.
When I get html of the div like this $("#myDiv").html(), it gets the below.
<div id="myDiv">
<select id="mySelect">
<option selected value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
</select>
</div>
It's the same as the above code which is normal.
However, when I change the selected value to 2, $("#myDiv").html() is still getting same code. 0 is still the selected value.
How can I get the html of the div, with the dynamically changed value?
You can do this :
$('#yourSelect option:selected').val()
Maybe like this:
function create_select(){
var select=$('<select/>').attr('id','mySelect');
var option0=$('<option/>').val(0).text('A').attr('selected', true);
select.append(option0);
var option1=$('<option/>').val(1).text('B');
select.append(option1);
var option2=$('<option/>').val(2).text('C');
select.append(option2);
var option3=$('<option/>').val(3).text('D');
select.append(option3);
$('#myDiv').empty().append(select);
}
function change_select_value(_new_val){
$('#mySelect option').removeAttr('selected');
$('#mySelect').val(_new_val).change();
}
$(document).on('change', '#mySelect', function(){ //conctruction for Dynamically created element
alert('change value to =>'+this.value); //or $(this).val();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="myDiv"></div>
<input type="button" value="Create Select" onclick="create_select();" /></br>
<input type="button" value="Set option C (value=2)" onclick="change_select_value(2);" /></br>
$('#myDiv').find("#mySelect").change(function () {
alert($("#mySelect option:selected").text());
alert($("#mySelect option:selected").val());
});
Related
how to display selected value of option in an empty div with jquery?
$(document).ready(function() {
let from_select = $('#from_select');
let from_text = $('#from');
//example#1
from_select.on('change', function() {
from_text.append($("option:selected").val());
})
//example#2
from_select.on('change', function() {
from_text.append($("#test option:selected").val());
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="from_select">
<option id="test" value="gel" selected data-buy="1" data-sell="1">GEL</option>
<option id="test" value="usd" data-buy="" data-sell="">USD</option>
<option id="test" value="eur" data-buy="" data-sell="">EUR</option>
<option id="test" value="rub" data-buy="" data-sell="">RUB</option>
</select>
<div id="from"></div>
in example#1 it works, but then i cant remove last value which was passed in #from div.
but in example#2 it doesn't work, i dont know why but it's not gettind id #test.
Example#1
You could read the selected value from $(this).val().
you should use .html instead of .append.it will replace the previously added value from the form
Example#2
And second one not working because id of #tornike element not there in your markup. And this not necessary. because already you are in onchange event so you will get the value from the event . So id target was unnecessary
$(document).ready(function() {
let from_select = $('#from_select');
let from_text = $('#from');
//example#1
from_select.on('change', function() {
from_text.html($(this).val());
})
//not necessary
//example#2
// from_select.on('change', function() {
// from_text.append($("#tornike option:selected").val());
//})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="from_select">
<option id="test" value="gel" selected data-buy="1" data-sell="1">GEL</option>
<option id="test" value="usd" data-buy="" data-sell="">USD</option>
<option id="test" value="eur" data-buy="" data-sell="">EUR</option>
<option id="test" value="rub" data-buy="" data-sell="">RUB</option>
</select>
<div id="from">
</div>
You can use any of the below option
$(this).val()
from_select.val()
I have some issues with options, can someone help me ?
I have a button with id="colorButton" but I don't know how to change his color with options.
<form>
<select id="colorSelect">
<option selected disabled>Text-Align : </option>
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
</form>
It can be a javascript answer, jquery... please :(
I have this in script :
$(document).ready(function(){
if ($("#colorSelect").click().val("1"){
$("#testButton").css("color", "red");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
But ofc it don't work :(
Your code contains lots bugs, you just need to bind a change event handler and set color based on selected option.
$(document).ready(function() {
$("#colorSelect").change(function() {
$("#testButton").css("color", $(':selected', this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="colorSelect">
<option selected disabled>Text-Align : </option>
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
</form>
<div id="testButton">button</div>
You need to bind to the change event of the select like:
$(document).ready(function() {
$("#colorSelect").change(function() {
if ($(this).val() == 1) $("#testButton").css("color", "red");
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="colorSelect">
<option selected disabled>Text-Align : </option>
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
</form>
<button id="testButton">button</button>
Everyone is focusing on making your code functional. I put the effort to solve your problem in different way.
Each option has data-color attribute. When you change dropdown then selected option's data-color value get picked and changes color. In this way, you don't need multiple if-else.
$(document).ready(function() {
$('#colorSelect').on('change', function(){
var color = $(this).find(':selected').data('color');
$("#testButton").css("color", color);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="colorSelect">
<option selected disabled>Text-Align : </option>
<option data-color='red'>Red</option>
<option data-color='blue'>Blue</option>
<option data-color='green'>Green</option>
</select>
<button id="testButton">button</button>
</form>
I have a following html drop down menu with Go button, it is working fine for the first two option values selection first and then hitting Go button, but not working for other two option values, which are having onclick events, Please help me that how to work with onclick event in <option> tag so that I can execute respective alert messages. I need it should work in Google Chrome browser. Thanks in advance.
<html>
<head>
<script>
function third(){
alert("It is a third option event");
}
function fourth(){
alert("Fourth option value");
}
</script>
</head>
<form name="testform" id="testformid">
<select name="testdropdownmenu" >
<option value="" selected>Please Select</option>
<option value="https://www.w3schools.com">First Option</option>
<option value="https://www.google.co.in">Second Option</option>
<option onclick="third()">Third Option</option>
<option onclick="fourth()">Fourth Option</option>
</select>
<input type="button" name="go" value="Go" onClick="location=document.testform.testdropdownmenu.options
[document.testform.testdropdownmenu.selectedIndex].value;">
</form>
</html>
Jquery
$(function(){
$('#testdropdownmenu').on('change', function(){
var val = $(this).val();
if(val === 'third') {
alert('third option')
}
else if(val === 'fourth') {
alert('fourth option')
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="testform" id="testformid">
<select name="testdropdownmenu" id="testdropdownmenu">
<option value="" selected>Please Select</option>
<option value="https://www.w3schools.com">First Option</option>
<option value="https://www.google.co.in">Second Option</option>
<option value="third">Third Option</option>
<option value="fourth">Fourth Option</option>
</select>
<input type="button" name="go" value="Go" onClick="location=document.testform.testdropdownmenu.options
[document.testform.testdropdownmenu.selectedIndex].value;">
</form>
JavaScript
function checkval() {
var val = document.getElementById('testdropdownmenu').value
alert(val);
}
<form name="testform" id="testformid">
<select name="testdropdownmenu" id="testdropdownmenu"onchange="checkval()">
<option value="" selected>Please Select</option>
<option value="https://www.w3schools.com">First Option</option>
<option value="https://www.google.co.in">Second Option</option>
<option value="third">Third Option</option>
<option value="fourth">Fourth Option</option>
</select>
<input type="button" name="go" value="Go" onClick="location=document.testform.testdropdownmenu.options
[document.testform.testdropdownmenu.selectedIndex].value;">
</form>
Use the onchange event on select and then compare its value.
You cannot trigger "onclick" event for option tag. Instead You can use "onchange" event of select tag.
The onclick attribute is not supported by the option tag. better use the onchange function on the 'select' tag
<html>
<head>
<script>
function changeValue() {
//get selected value
}
</script>
</head>
<form name="testform" id="testformid">
<select name="testdropdownmenu" onchange="changeValue();" >
<option value="" selected>Please Select</option>
<option value="https://www.w3schools.com">First Option</option>
<option value="https://www.google.co.in">Second Option</option>
<option >Third Option</option>
<option >Fourth Option</option>
</select>
<input type="button" name="go" value="Go" onClick="location=document.testform.testdropdownmenu.options
[document.testform.testdropdownmenu.selectedIndex].value;">
</form>
</html>
Just try to use onFocus, will trigger when user focus on the element
onclick is not the appropriate event to attach on select > option
Instead you should use onchange for your case. onchange fires whenever you change the the value of select box. And then in your function called on click you can check if its second/third then do something. check the code below:
In HTML:
<select id="testdropdownmenu" onchange="myFunction()">
And in Javascript:
function myFunction() {
var favValue = document.getElementById("testdropdownmenu").value;
// Do something your favourite value appears here
alert(favValue);
}
Hope this helps!!
I have this code:
<select>
<option disabled selected>Select Method</option>
<option value="question">Question</option>
<option value="password">Password</option>
<option value="email">Email</option>
<option value="none">None</option>
</select>
Now I want when user select each of them some div that hidden in css with display:none; get visible for example when user select Question the div that have question id get visible or when Password selected the div that have password id get visible.
I try this but not work:
$(document).ready(function(){
if ($("#auth option:selected").text() == "question"){
$("#question").css("display","block");
}
});
So how can I do this?
If you follow the pattern you have done so far, you have to write code for each option. If your options and div elements are coupled with value and id, you can simply do like this,
$("select").change(function() {
$("div").hide();
$("#" + $(this).val()).show();
});
Demo Fiddle
Here is Demo for this , remove disabled from select tag so that user can select the options
Jsfiddle
http://jsfiddle.net/adarshkr/z9gcf40r/2/
Code
HTML
<select id="showdiv">
<option disabled selected>Select Method</option>
<option value="question">Question</option>
<option value="password">Password</option>
<option value="email">Email</option>
<option value="none">None</option>
</select>
<div id="question" class="hide">
<p>question</p>
</div>
<div id="password" class="hide">
<p>password</p>
</div>
<div id="email" class="hide">
<p>email</p>
</div>
<div id="none" class="hide">
<p>none</p>
</div>
CSS
.hide{
display:none
}
JAVASCRIPT
$("select").change(function(){
$("div").hide();
$("#"+$(this).val()).show();
});
try this,
$('#auth').on('change', function() {
var that = $(this).val();
if (that === "question"){
$("#question").css("display","block");
}
});
Better check value than the text.
$(document).ready(function(){
if ($("#auth option:selected").val() == "question"){
$("#question").css("display","block");
}
});
These are Dynamic dependent select controls. The sets of values of (1-3, 4-6, 7-9) determine the use hide/show divs function. The problem is the function i have only hide/show depending on the div id. How can i make the function hide/show div depended on the values(1-3, 4-6, 7-9) found in the selectbox?
Jquery
$('#select').change(function() {
$('#sub1, #sub2, #sub3').hide();
$('#sub' + $(this).find('option:selected').attr('id')).show();
});
Html Setup
<html>
<select size="6" id="category">
<option value="">categories 1-3 </option>
<option value="">----</option>
<option value="">----</option>
</select>
<div id="sub1" style="display:none">
<select name="subc1" size="6">
<option value="1">subcategories 4-6</option>
<option value="2">---</option>
<option value="3">---</option>
</select>
</div>
<div id="sub2" style="display:none">
<select name="subc2" size="6">
<option value="4">subcategories 7-9</option>
<option value="5">----</option>
<option value="6">----</option>
</select>
</div>
<div id="sub3" style="display:none">
<select name="subc3" size="6">
<option value="7">End</option>
<option value="8">----</option>
<option value="9">----</option>
</select>
</div>
</html>
select the value from drop down change function and do the operation depends on the value of drop down, following is the sample code
$(function() // Shorthand for $(document).ready(function() {
$('select').change(function() {
if($(this).val() == 1)
{
$('#sub1').hide();
$('#sub2').show();
}
});
});
You nee to change minor change in your category select
<select size="6" id="category">
<option value="1">categories 1-3 </option>
<option value="2">----</option>
<option value="3">----</option>
</select>
$('select#category').on('change', function() {
$('div[id=^sub]:visible').hide();
$('div#sub' + this.value).show();
});
can also use .change() instead of .on('change').
$('select#category').change(function() {
$('div[id=^sub]:visible').hide();
$('div#sub' + this.value).show();
});
NOTE:
$('div[id=^sub]:visible') will point to all divs that have id start with sub and visible.
You are trying with $('#select') which need to be $('#category') or $('select#category').
According to your comment:
Complete solution will look like following:
function isOnlyDashed(text) {
return text.replace(/-/g, '').length === 0;
}
$('select#category').change(function() {
var text = $('option:selected', this).text();
if (!isOnlyDashed(text)) {
$('div[id=^sub]:visible').hide();
$('div#sub' + this.value).show();
}
});
$('select[name^=subc]').change(function() {
var text = $('option:selected', this).text();
if (!isOnlyDashed(text)) {
$(this).parent() // jump to parent div
.next('div[id^=sub]:hidden') // go to next hidden div
.show();
}
});
Complete Workout
The problem with your code is that you have an incorrect selector.
$('#select')...
should be
$('select')...
Also, this part is wrong
$('#sub' + $(this).find('option:selected').attr('id')).show();
Replace it with this
$('#sub' + $(this).val()).show();
Finally, having different elements with the same name/id "sub1" is probably a bad idea, though technically not illegal. It is certainly confusing.
working demo http://jsfiddle.net/FwBb2/1/
I have made minor changes in your Jquery code as well as added value in your first select drop-down list which was missing rest hope this helps.
Please lemme know if I missed anything! B-)
code
$('select').change(function() {
$('#sub1, #sub2, #sub3').hide();
$('#sub' + $(this).val()).show();
});
HTML
<html>
<select id="category">
<option value="1">categories 1-3 </option>
<option value="2">----</option>
<option value="3">----</option>
</select>
<div id="sub1" style="display:none">
<select name="subc1" size="6">
<option value="1">subcategories 4-6</option>
<option value="2">---</option>
<option value="3">---</option>
</select>
</div>
<div id="sub2" style="display:none">
<select name="subc2" size="6">
<option value="4">subcategories 7-9</option>
<option value="5">----</option>
<option value="6">----</option>
</select>
</div>
<div id="sub3" style="display:none">
<select name="subc3" size="6">
<option value="7">End</option>
<option value="8">----</option>
<option value="9">----</option>
</select>
</div>
</html>