Develop Reference

How to target outside $(this) in jQuery

I'm trying to use $('.selector').on('change', function(){}) then inside of it, I added each. What I want is to target the current .selector, if the current item is already selected then make it empty so you can select other item; there are multiple <select class='selector'> elements in the DOM. Please see my code below.
$(document).ready(function(){
$('.selector').on('change', function(){
var currentSelect = $(this).val();
if(currentSelect == ''){
$('.selector').each(function(){
if(currentSelect == $(this).val()){
alert("Sorry, you cannot select that item again.");
$(this).val('');
}
});
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<select class="selector">
<option></option>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Banana">Banana</option>
<option value="Watermelon">Watermelon</option>
</select>
<br><br>
<select class="selector">
<option></option>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Banana">Banana</option>
<option value="Watermelon">Watermelon</option>
</select>
<br><br>
<select class="selector">
<option></option>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Banana">Banana</option>
<option value="Watermelon">Watermelon</option>
</select>
<br><br>
<select class="selector">
<option></option>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Banana">Banana</option>
<option value="Watermelon">Watermelon</option>
</select>

You need 2 loops at each change events here.
to get all selected values.
to hide all values already selected from the other <select> elements.
Simple as that.
$(document).ready(function(){
var selected = []; // Global scope array.
$('.selector').on('change', function(){
var currentSelect = $(this).val();
var selected = []; // Array reset
$('.selector').each(function(){
var val = $(this).val();
if(val!=""){
selected.push($(this).val()); // Array fill
}
});
console.log(selected);
$('.selector option').each(function(){
if($.inArray($(this).val(),selected)!=-1){ // If not in array: hide
$(this).hide();
}else{
$(this).show();
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<select class="selector">
<option></option>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Banana">Banana</option>
<option value="Watermelon">Watermelon</option>
</select>
<br><br>
<select class="selector">
<option></option>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Banana">Banana</option>
<option value="Watermelon">Watermelon</option>
</select>
<br><br>
<select class="selector">
<option></option>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Banana">Banana</option>
<option value="Watermelon">Watermelon</option>
</select>
<br><br>
<select class="selector">
<option></option>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Banana">Banana</option>
<option value="Watermelon">Watermelon</option>
</select>

If I understood your question correctly, this would be the answer. By using $(this), you are applying whatever change to all select elements on the page. You want to do it just for the one that was clicked. For that reason, you should be very careful with $(this) and use $(event.target) instead. Read more about the differences here:
Difference between $(this) and event.target?
$(document).ready(function(){
$('.selector').on('change', function(e){
var currentSelect = $(e.target).val(); // if you need to pass/submit the value somewhere later
$(e.target).attr('disabled', 'disabled');
});
});
Why not simply disable the target element? You can still see what was selected and the user cannot click it again.

This solution is a little bit messy, but it works
$(document).ready(function(){
$(".selector").on("change", function(){
var currentSelect = $(this).val();
$(this).siblings().on("change", function(event){
if(currentSelect == $(this).val()){
$(this).val('')
alert("Sorry, you cannot select that item again.");
}
});
});
});

There isn't really a reason to loop through .each here.
What you can do, is .on('change') create an array of all values of elements with the .selector class. Then once you have that array, check how many instances there are of the element that was just selected. If that number > 1, then that selection has already been made in a different .selector element.
Working Pen:
https://codepen.io/anon/pen/WLvzMM
$(document).ready(function(){
$('.selector').on('change', function(){
// Put the value of all elements with the class of `.selector` into an array
var all = $.map($('.selector'), function (el) { return el.value; });
// Get value of the change that was just made
var currentSelect = $(this).val();
// Get the number of occurences of the value that was just selected
var occurences = $.grep(all, function (elem) {
return elem === currentSelect;
}).length;
// If there is more than one occurence (the one that was just selected), then prevent the selection.
if(occurences > 1){
alert("Sorry, you cannot select that item again.");
$(this).val('');
}
});
});

JQuery : Assign null to selected dropdown value

I have two dropdowns. I want the second dropdown, Assign value to be set to null when the specific value which is student from the first dropdown is chosen.
First dropdown:
<select name="Reg">
<option value="">Choose</option>
<option value="admin">Admin</option>
<option value="student">Student</option>
</select>
This is the second dropdown which is hidden, shown only when Reg with value admin is chosen.
<select name="Assign">
<option value="">Choose</option>
<?php
$sql=odbc_exec($conn,'SELECT AssignCd, AssignNm FROM AssignList');
if(odbc_fetch_row($sql))
{
$AssignCd= odbc_result($sql, "AssignCd");
$AssignNm= odbc_result($sql, "AssignNm");
echo "<option value='".$AssignCd."'>".$AssignNm."</option>";
}
?>
</select>
I tried by doing the following but it doesn't work.
Please Help.
if($("#Reg").val("student");) {
$("#AssignCd").val("");
$("#AssignNm").val("");
}
UPDATED:
When Admin is selected, Assign with admin is chosen will be automatically selected. The problem is when I change my option to Student, the supposed value student is chosen is not shown.
How can I make the Assign value of both Admin and Student stay as it is and not jumbled up between them?
This is my code :
fiddle
$(document).ready(function() {
$("#Reg").on("change", function() {
if ($(this).find("option:selected").text() === 'Admin') {
$("#Assign").show();
$('select[name="Assign"] option[name="student_assign"]').attr("disabled",true).prop("selected", false).wrap('<span>');
$('select[name="Assign"] option[name="admin_assign"]').prop('selected',true);
}
else if ($(this).find("option:selected").text() === 'Student') {
$("#Assign").show();
$('select[name="Assign"] option[name="student_assign"]').prop('selected',true);
} else {
$("#Assign").hide().attr("disabled"," ");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select name="Reg" id="Reg">
<option value="">Choose</option>
<option value="admin">Admin</option>
<option value="student">Student</option>
</select>
<select name="Assign" id="Assign">
<option value=" ">Choose</option>
<option name ="student_assign" value="student_assign">student is chosen</option>
<option name ="admin_assign" value="admin_assign">admin is chosen</option>
</select>

$('select[name="Reg"]').on('change', function() {}) this will trigger when you select an option in your select
$(this).find("option:selected").val() == "student" this will see if you have select an option with value "student"
$('select[name="Assign"] option[value="AssignCd"]').text(""); this sets the text of the option with value = AssignCd to empty
This is how far we can go without showing us your generated html for <select name="Assign">
$('select[name="Reg"]').on('change', function() {
if ($(this).find("option:selected").val() == "student") {
$('select[name="Assign"] option[value="AssignCd"]').text("");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="Reg">
<option value="">Choose</option>
<option value="admin">Admin</option>
<option value="student">Student</option>
</select>
<select name="Assign">
<option value="AssignCd">AssignNm</option>
</select>
Update
There is no need to use .wrap() as far as i can see, use .hide() / .show() look at the example below.
$(document).ready(function() {
$("#Reg").on("change", function() {
if ($(this).find("option:selected").text() === 'Admin') {
$("#Assign").show();
$('select[name="Assign"] option[name="student_assign"]').attr("disabled", true).prop("selected", false).hide();
$('select[name="Assign"] option[name="admin_assign"]').prop('selected', true);
} else if ($(this).find("option:selected").text() === 'Student') {
$('select[name="Assign"] option[name="student_assign"]').attr("disabled", false).prop("selected", true).show()
$('select[name="Assign"] option[name="student_assign"]').prop('selected', true);
} else {
$("#Assign").hide().attr("disabled", " ");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select name="Reg" id="Reg">
<option value="">Choose</option>
<option value="admin">Admin</option>
<option value="student">Student</option>
</select>
<select name="Assign" id="Assign">
<option value=" ">Choose</option>
<option name ="student_assign" value="student_assign">student is chosen</option>
<option name ="admin_assign" value="admin_assign">admin is chosen</option>
</select>

<select name="Reg" id="Reg">
<option value="">Choose</option>
<option value="admin">Admin</option>
<option value="student">Student</option>
</select>
First of all #<selector> is used to select Dom elements which have an id <selector>. You cannot access them with the name attribute and id selector.
As for your issue. you need to use the on change event of the first drop down to decide the visibility of the second drop down.
<select name="Assign" id="Assign">
<option value="">Choose</option>
....
....
$('#Assign').hide(); // first hide it so they cannot see it
$(document).on('change', '#Reg', function(e){
if($(this).val()=='admin'){
$('#Assign').show();
}else{
$('#Assign').val('').hide();
}
})

Change select box value depending other selected option box

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>

How to select option to change value select option by jquery

I have 2 <select> inputs. If I select an option in the first input, I want to filter the options by id based on the selected option of the first input.
I have defined id for each options in the second input ("prod"+id)
This is HTML:
<select id="provider" name="provider">
<option selected="selected" value="">--- Select providers ---</option>
<option value="1">Provider 1</option>
<option value="2">Provider 2</option>
<option value="3">Provider 3</option>
</select>
<select id="product" name="product">
<option id="" value="" selected="selected">--- Select products ---</option>
<option id="prod2" value="1">Product 1</option>
<option id="prod2" value="2">Product 2</option>
<option id="prod2" value="3">Product 3</option>
<option id="prod3" value="4">Product 4</option>
<option id="prod1" value="5">Product 5</option>
<option>
</select>
This is my jQuery code:
$(document).ready(function(){
$('#provider').change(function(){
var filter = $(this).val();
$('#type').each(function(){
if ($(this).val() == filter) {
$(this).show();
} else {
$(this).hide();
}
$('#prod1').val(filter);
})
})
})
I want to show products from the selected provider only.
Online Demo: http://jsfiddle.net/notfoundlife/BCedV/1/

Assuming your html above, I think this should work for you.
$(document).ready(function(){
$('#provider').change(function(){
var filter = $(this).val();
$('#product option[value=' + filter +']').attr('selected', 'selected');
});
});

I think your issue is that you are not selecting the individual options, but the whole select list, so everything is hiding. Try changing the selector like this and go from there.
$(document).ready(function(){
$('#provider').change(function(){
var filter = $(this).val();
$('#type option').each(function(){
if ($(this).val() == filter) {
$(this).show();
} else {
$(this).hide();
}
})
})
})

jquery target selected option in dropdown

<select id="dropdown">
<option value="200" selected>AMD Athlon 7x</option>
<option value="300">Core i7</option>
<option value="400">Core i5</option>
</select>
<select id="dropdown">
<option value="250" selected>GTX 560 ti</option>
<option value="350">GRX 680</option>
<option value="40">ATI 6870</option>
</select>
Im calculating price of final product base on selected value.
$('select').change(function() {
});
I need this function to remove selected attribute and assign it to selected option but i dont know how to target newly selected option.

$('select').change(function() {
$(this).children(':selected').attr('selected', true);
});
But i don't understand why you need this :)

Like this:
$('select :selected').change(function(){
//more code
});

To grab the selected option, your drop down lists should first have unique IDs
<select id="dropdown1">
<option value="200" selected>AMD Athlon 7x</option>
<option value="300">Core i7</option>
<option value="400">Core i5</option>
</select>
<select id="dropdown2">
<option value="250" selected>GTX 560 ti</option>
<option value="350">GRX 680</option>
<option value="40">ATI 6870</option>
</select>
$("#dropdown1 option:selected");
Now, that said, your drop down menu will change the first drop down selected option for you automatically.
In addition, if you want to grab the value of the selected option when it is selected, use .val()
$('select :selected').change(function(){
$("#dropdown1 option:selected").val();
});

The above examples have a syntax error. The following is incorrect (I tried it, it doesn't work):
$('select :selected').change(function(){
Below is from the jQuery site example code (I tried it too, and it does work):
<select name="garden" multiple="multiple">
<option>Flowers</option>
<option selected="selected">Shrubs</option>
<option>Trees</option>
<option selected="selected">Bushes</option>
<option>Grass</option>
<option>Dirt</option>
</select>
/* ... */
<script>
$( "select" ).change(function() { // <<<<< this is the correct syntax
var str = "";
$( "select option:selected" ).each(function() {
str += $( this ).text() + " ";
});
})
</script>