I am trying that when the Change event is launched in a select with the same class as others, the value is retrieved, and if it is equal to one data then select another of the same select. My problem is in, I do not know how to create the selector. I've tried like this, but it does not work. Welcome all the answers
$(function(){
$(document).on('change','.sel',function(){
var val = parseInt( $(this).val() );
if( val === 2 ){
$(this + 'option[value="3"]').prop('selected',true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="sel">
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
</select>
<select class="sel">
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
</select>
You can use this keyword to get select element and then use find method to get desired option. You cannot use this like you did in your example. Try running this + 'option[value="3"]' in your console - it will output "[object Window]option[value=\"3\"]", which is not a selector you wanted.
$(function(){
$(document).on('change','.sel',function(){
var val = parseInt( $(this).val() );
if( val === 2 ){
$(this).find("option[value='3']").prop('selected',true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="sel">
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
</select>
<select class="sel">
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
</select>
$('.sel > option').click(function(e){
var = trueVal = "";
var selectedVal = $(e.target).attr('value');
if(selectedVal == '1'){
trueVal = '2';
} else if(selectedVal == '2'){
trueVal = '3';
}
return trueVal;
console.log(trueVal);
// Do whatever you want with trueValue
});
Related
I'm using a Django form, and modifying an option list (in HTML) for one of the fields using $(document) on change for a different field in the form. When I select an option (multiple choice list, can select more than one - not checkboxes),
this.value
returns the correct value. However, when I deselect the option,
this.value
returns null. Why would this be the case? Is a value only returned when something is selected (as opposed to deselected)? If so, how can I get the value of the element that was deselected
Here is my code:
$(document).on("change", "#name2", function () {
var url = #the url I'm using
url += "&field=" + this.value + "&visible=1";
value = this.value
...etc
jQuery val() will return an array of values on a <select multiple> or null (depending on version):
$(document).on('change', '#name2', function() {
var val = $(this).val()
console.log(val ? val : 'None selected');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select size="20" id="name2" multiple="">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
<option value="5">Item 5</option>
<option value="6">Item 6</option>
<option value="7">Item 7</option>
<option value="8">Item 8</option>
<option value="9">Item 9</option>
<option value="10">Item 10</option>
</select>
You can iterate .selectedOptions property of <select> element with multiple attribute set to get the .value of each selected <option> element at change event
function getOptionValues(options) {
return Array.from(options, function(el) {
return el.value
})
}
document.querySelector("select")
.onchange = function() {
console.log(getOptionValues(this.selectedOptions))
}
<select multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
i am new to Javascript/ Jquery
so my problem is :
i want to change the select/option box text and value depending on the other selected option/box
so for examplemy first option is :
<select id="gender">
<option>Select Your Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
and then one i want to change depending on selected option is :
When its male :
<select id="name">
<option>Select Your Name</option>
<option value="Male1">Male 1</option>
<option value="Male2">Male 2</option>
</select>
when its female :
<select id="name">
<option>Select Your Name</option>
<option value="female1">Female 1</option>
<option value="female2">Female 2</option>
</select>
Thanks for the help! :)
There you go with DEMO
var options=""; //store the dynamic options
$("#gender").on('change',function(){ //add a change event handler to gender select
var value=$(this).val(); //get its selected value
options="<option>Select Your Name</option>"
if(value=="Male") //value ==Male then set male required options
{
options+="<option value='Male1'>Male 1</option>"
+"<option value='Male2'>Male 2</option>";
$("#name").html(options);
}
else if(value=="Female") //else set female required options
{
options+='<option value="female1">Female 1</option>'
+'<option value="female2">Female 2</option>';
$("#name").html(options);
}
else
$("#name").find('option').remove() //if first default text option is selected empty the select
});
I would suggest to have a better HTML architecture to achieve this kind of things. Have each name in one Dropdown only and categorise with some data attribute. When changing the value of Gender Dropdown, filter with type and toggle the options. Follow this:
$(function(){
$("#gender").on("change", function(){
var $target = $("#name").val(""),
gender = $(this).val();
$target
.toggleClass("hidden", gender === "")
.find("option:gt(0)").addClass("hidden")
.siblings().filter("[data-type="+gender+"]").removeClass("hidden");
});
});
.hidden{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="gender">
<option value="">Select Your Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<select id="name" class="hidden">
<option value="">Select Your Name</option>
<option value="Male1" data-type="Male">Male 1</option>
<option value="Male2" data-type="Male">Male 2</option>
<option value="female1" data-type="Female">Female 1</option>
<option value="female2" data-type="Female">Female 2</option>
</select>
Fiddle link: http://jsfiddle.net/ashishanexpert/qzxedcut/
Whenever a change occurs, use the value of the gender dropdown to populate the names one. We use a for loop to produce more than one option per gender.
$('#gender').change(function(){
if(!this.selectedIndex) return;
var gender = $(this).val(),
$name = $('#name').empty(),
$option = $('<option />').text('Select Your Name').appendTo($name);
for(var i = 1; i <= 2; i++)
$option.clone().prop('value', gender + i).text(gender + ' ' + i).appendTo($name);
});
JSFiddle
Follow the Practice:
Do not hardcode options this case.Best practice is get value from Json.
Then later changes are easy instead of change all codings.
Build dynamic Dropdowns. Dont Hide and Show.
HTML
<select id="gender">
<option>Select Your Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<select id="gtr" name="location" placeholder="Anycity"></select>
Jquery
jQuery(function($) {
var gender = {
'Male': ['Male1', 'male2'],
'Female': ['Female1','Female1'],
}
var $gndr = $('#gtr');
$('#gender').change(function () { debugger
var GNDR = $(this).val(), gndrs = gender[GNDR] || [];
var html = $.map(gndrs, function(gndr){
return '<option value="' + gndr + '">' + gndr + '</option>'
}).join('');
$gndr.html(html);$gndr.append(new Option("Select Name", "0"));$gndr.val("0");
});
});
JsFiddle
https://jsfiddle.net/2pza5/1135/
I suggest you to try this way:
Change you jquery:
<select id="nameMale">
<option>Select Your Name</option>
<option value="Male1">Male 1</option>
<option value="Male2">Male 2</option>
</select>
<select id="nameFemale">
<option>Select Your Name</option>
<option value="Male1">Male 1</option>
<option value="Male2">Male 2</option>
</select>
Inser this javascript:
<script>
<![CDATA[
$(function() {
$('#nameFemale').hide();
$('#nameMale').hide();
function changeGen(val){
if(val == 'Female'){
$('#nameFemale').show();
$('#nameMale').hide();
}else{
$('#nameFemale').hide();
$('#nameMale').show();
}
}
$('#gender').change(function() {
changeGen($('#gender').val());
});
});
]]>
</script>
FIDDLE
$('#gender').change(function (e) {
var val = $("option:selected", this).val()
console.log(val);
if(val =='Male'){
$('#name').find('option.female').hide();
$('#name').find('option.male').show();
}else if(val =='Female'){
$('#name').find('option.female').show();
$('#name').find('option.male').hide();
}else{
}
});
Added class for each option since it is static.
Then you can hide the option from second select depending on the value of first select
Try this:
$("#gender").on("change",function(){
var sel="";
if($(this).val() == "Female"){
sel=' <option>Select Your Name</option>';
sel+=' <option value="female1">Female 1</option>'
sel+='<option value="female2">Female 2</option>'
}else{// no other if since you have only two options male/female
sel= '<option>Select Your Name</option>';
sel+= '<option value="Male1">Male 1</option>';
sel+= '<option value="Male2">Male 2</option>';
}
$("#name").html(sel);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="gender">
<option>Select Your Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<select id="name">
</select>
I select other option on one of my ddl and I succeded on getting that value,but in simultaneously I want to get option on other ddl in the code.
How can I get the other ddl option....?
I put here a code example of my issue:
<select id="someIdName" class="selectMenuFromHour" onchange="someFunc(this)">
<option value="0" selected="selected">(none)</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<select id="someIdName" class="selectMenuTillHour" onchange="someFunc(this)">
<option value="0" selected="selected">(none)</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
function someFunc(obj) {
var startHour;
var endHour;
if ($(obj).attr('class') == "selectMenuFromHour") {
startHour = $(obj).val();
//*need to add the value of the class - selectMenuTillHour !
}
if ($(obj).attr('class') == "selectMenuTillHour") {
endHour = $(obj).val();
//*need to add the value of the class selectMenuFromHour!
}
}
You can try this:
$('select').change(function(){
var $this = $(this);
var startHour = 0;
var endHour = 0;
if ($this.hasClass("selectMenuFromHour")) {
$this.find('option').each(function(){
startHour += parseInt($(this).val()) || 0;
});
alert(startHour);
}
if ($this.hasClass("selectMenuTillHour")) {
$this.find('option').each(function(){
endHour += parseInt($(this).val()) || 0;
});
alert(endHour);
}
});
Here is the DEMO.
In the following HTML code I would like to realize the following with JavaScript. When the user selects Audi, he has only the option to select application 2 (application 1 has to disappear in this case).
<select>
<option value="volvo">Volvo</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="app1">application 1</option>
<option value="app2">application 2</option>
</select>
I wrote the code here.
html:
<select>
<option id="app1" value="volvo">Volvo</option>
<option id="app2" value="audi">Audi</option>
</select>
<select>
<option value="app1">application 1</option>
<option value="app2">application 2</option>
</select>
js:
var selections = document.getElementsByTagName('select');
selections[0].onchange = carSelection;
function carSelection(e) {
var first = selections[0];
var id = first.options[first.selectedIndex].id;
var second = selections[1];
var j = 0;
while (second.options[j]) {
second.options[j].disabled = (second.options[j].value != id );
if (second.options[j].value == id)
second.selectedIndex = j;
j++;
}
}
http://jsfiddle.net/U4y2J/3/
Automatically deselect application 1 when Audi is selected.
http://jsfiddle.net/KQMLQ/1/
HTML
<select id="1">
<option value="volvo">Volvo</option>
<option value="audi">Audi</option>
</select>
<select id="2">
<option value="app1">application 1</option>
<option value="app2">application 2</option>
</select>
jQuery
$("#1").click(function() {
if($("#1").val() === 'volvo') {
$("#2").find('option[value="app1"]').removeAttr('disabled');
}
if($("#1").val() === 'audi') {
$("#2").find('option[value="app1"]').attr('disabled', 'disabled').removeAttr('selected');
$("#2").find('option[value="app2"]').removeAttr('disabled');
}
});
HTML:
<select id="1">
<option value="volvo">Volvo</option>
<option value="audi">Audi</option>
</select>
<select id="2">
<option id="2a" value="app1">application 1</option>
<option id="2b" value="app2">application 2</option>
</select>
Javascript:
<script type="text/javascript">
document.getElementById("1").onchange = change;
function change(){
var s_a = document.getElementById("1");
var car = s_a.options[s_a.selectedIndex].value;
var s_b = document.getElementById("2");
if(car === "audi"){
s_b.options["2b"].disabled = true ;
s_b.options["2a"].selected = true;
}
else {
s_b.options["2b"].disabled = false ;
}
}
</script>
And link to fiddler
Here is a jQuery version DEMO
where I remove the option when the select is audi - it is removed based on values so you can have as many options you want surrounding the option to remove
var opts=[];
$(function() {
$("#sel2 option").each(function(){ // save all options
var opt = {};
opt.value=this.value;
opt.text=this.text;
opts.push(opt);
});
$("#sel1").on("change",function() { // restore relevant options
var sel = $("#sel2");
sel.empty();
var val = $(this).val();
$.each(opts,function(i,opt) {
if (val == "audi" && opt.value=="app2") return;
sel.append('<option value="'+opt.value+'">'+opt.text+'</option>');
});
});
});
Here is my javascript code, i want to pass current selected value of the option to my js function, in this code i used static number 6.
<select name='project_name' class='required input_field' id='project_name' onchange="sendRequest('GET','getClientName.jsp?ProjectId=6')">
<option value=''>-- Select --</option>
<option value="1">Project 1</option>
<option value="2">Project 2</option>
<option value="3">Project 3</option>
</select>
help me to solve this...
Change the string 'getClientName.jsp?ProjectId=6' to
'getClientName.jsp?ProjectId=' + this.options[this.selectedIndex].value)
or
'getClientName.jsp?ProjectId=' + this.value)
but I think the first one is more browser compatible.
var selectBox = document.getElementById('project_name');
selectBox.addEventListener('change', function() {
sendRequest('GET', 'getClientName.jsp?ProjectId=' + this.value);
});
It will help you to get the selected option value . Try this link http://jsfiddle.net/xyaaa/9/.
<html>
<head>
<script>
function getOption(t){
var val;
var options = t.options;
for(var i=0,len=options.length;i<len;i++){
var option = options[i];
if(option.selected){
val = option.value;
}
}
return val;
}
function sendRequest(method , url){
console.log(url);
}
</script>
</head>
<body>
<select onchange="var x=getOption(this);sendRequest('GET','getClientName.jsp?ProjectId='+x)">
<option value="1">Project 1</option>
<option value="2">Project 2</option>
<option value="3">Project 3</option>
</select>
</body>
</html>