I am working with three dropdown selects with same options. I want to disable an item if that item is selected in other dropdown. I have JQuery code working for two dropdown box. i.e. if I am selecting one item its disabled in other dropdown. But I am having trouble doing it for three dropdown. If I select one item in first that item is disabled in two and three but when I select second dropdown, third dropdown only disables second dropdown selection.
I am new to jquery and AJAX.
PLease guide me.
Appreciate your help.
<select id="select1" name="phoneusescategories">
<option value="" selected="selected">top-1 use </option>
<option value="1"> Games</option>
<option value="2"> Productivity</option>
<option value="3"> News</option>
<option value="4"> Shopping & services</option>
<option value="5"> Music</option>
<option value="6"> Social Networking</option>
<option value="7"> Browser</option>
</select>
<select id="select2" name="phoneusescategories">
<option value="" selected="selected">top-2 use </option>
<option value="1"> Games</option>
<option value="2"> Productivity</option>
<option value="3"> News</option>
<option value="4"> Shopping & services</option>
<option value="5"> Music</option>
<option value="6"> Social Networking</option>
<option value="7"> Browser</option>
</select>
<select id="select3" name="phoneusescategories">
<option value="" selected="selected">top-3 use </option>
<option value="1"> Games</option>
<option value="2"> Productivity</option>
<option value="3"> News</option>
<option value="4"> Shopping & services</option>
<option value="5"> Music</option>
<option value="6"> Social Networking</option>
<option value="7"> Browser</option>
</select>
$(document).ready(function(){
$("select").change(function() {
$("select").not(this).find("option[value="+ $(this).val() + "]").attr('disabled', true);
});
});
http://jsfiddle.net/sakura1/xzjdsusz/
you might want to use prop() instead of attr() if you want to enable and disable the options of your select..
HERE: (jsFiddle DEMO)
I added this line just in case you want to remove other disabled options whenever you select a new option
$('select option').prop("disabled", false);
CODE SNIPPET :
$('select').on('change', function(){
$('select option').prop("disabled", false);
$("select").not(this).find("option[value="+ $(this).val() + "]").prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="select1" name="phoneusescategories">
<option value="" selected="selected">top-1 use </option>
<option value="Games"> Games</option>
<option value="2"> Productivity</option>
<option value="3"> News</option>
<option value="4"> Shopping & services</option>
<option value="5"> Music</option>
<option value="6"> Social Networking</option>
<option value="7"> Browser</option>
</select>
<select id="select2" name="phoneusescategories">
<option value="" selected="selected">top-2 use </option>
<option value="Games"> Games</option>
<option value="2"> Productivity</option>
<option value="3"> News</option>
<option value="4"> Shopping & services</option>
<option value="5"> Music</option>
<option value="6"> Social Networking</option>
<option value="7"> Browser</option>
</select>
<select id="select3" name="phoneusescategories">
<option value="" selected="selected">top-3 use </option>
<option value="Games"> Games</option>
<option value="2"> Productivity</option>
<option value="3"> News</option>
<option value="4"> Shopping & services</option>
<option value="5"> Music</option>
<option value="6"> Social Networking</option>
<option value="7"> Browser</option>
</select>
OK this is an updated answer
$('#select1,#select2,#select3').on('change', function(){
var value =$.trim($(this).val());
$('select option:contains("'+value+'")').attr('disabled','disabled');
});
New DEMO
it will work for just Games
So change your option value same of option text like so
<option value="Games"> Games</option>
Related
First to filter the first 3 dropdowns menus, I used the code found on this page
I can also filter the next 3 as well, but I don't know how to get the selected data from the first 3 menus (Year 1) and show in the next 3 menus (Year 2) only the 3 selected options in Year 1. All the options are the same in all dropdown menus.
Example: Year 1 dropdown 1 : Red; dropdown 2 : Blue and Dropdown 3 : Yellow.
How can i find in Year 2 Dropdown 1 only the 3 options selected previously (Red, Blue, Yellow) and hide the others, idem for Year 2 Dropdown 2 and Year 2 Dropdown 3 (options must also be filtered to avoid multiple selection for Year 2)
Fiddle
$(document).ready(function() {
$("select").on('focus', function() {
$("select").find("option[value='" + $(this).val() + "']").attr('disabled', false);
}).change(function() {
$("select").not(this).find("option[value='" + $(this).val() + "']").attr('disabled', true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>
YEAR 1
<select id="y1sp1" name="indication_subject[]">
<option></option>
<option value="1"> Red</option>
<option value="2"> Blue</option>
<option value="3"> Yellow</option>
<option value="4"> Black</option>
</select>
<select id="y1sp2" name="indication_subject[]">
<option></option>
<option value="1"> Red</option>
<option value="2"> Blue</option>
<option value="3"> Yellow</option>
<option value="4"> Black</option>
</select>
<select id="y1sp3" name="indication_subject[]">
<option></option>
<option value="1"> Red</option>
<option value="2"> Blue</option>
<option value="3"> Yellow</option>
<option value="4"> Black</option>
</select>
</p><p>
YEAR 2
<select id="y2sp1" name="indication_subject[]">
<option></option>
<option value="1"> Red</option>
<option value="2"> Blue</option>
<option value="3"> Yellow</option>
<option value="4"> Black</option>
</select>
<select id="y2sp2" name="indication_subject[]">
<option></option>
<option value="1"> Red</option>
<option value="2"> Blue</option>
<option value="3"> Yellow</option>
<option value="4"> Black</option>
</select>
<select id="y2sp3" name="indication_subject[]">
<option></option>
<option value="1"> Red</option>
<option value="2"> Blue</option>
<option value="3"> Yellow</option>
<option value="4"> Black</option>
</select>
</p>
I have a html code (a list item), and it works fine, when you click it, it drops down the list item, here is the code:
<div class="list-item"> <strong class="table-cell">Choose:</strong> <span class="table-cell right">
<!-- <input type="text" name="numberofchildren" id="numberofchildren" value=""> -->
<select name="numberofchildren" id="numberofchildren" value="numberofchildren" >
<option value="Blood Group" selected disabled>NO CHILDREN</option>
<option value="No Children" >No Children</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
<option value="8" >8</option>
<option value="9" >9</option>
<option value="10" >10</option>
</select>
</span> </div>
But my question is this, how can I add a javascript code, that when a user chooses, for example "1" ( if he chose == "1" {...}, how can I do that.
Hope that I was clear, thank you very much for your time and effort.
function myfunction(select) {
if (select.value == "1") {
alert("You selected ONE");
} else {
alert("You selected: " + select.value);
}
}
<select name="numberofchildren" id="numberofchildren"
value="numberofchildren" onchange="myfunction(this)">
<option value="">Please select value...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
I wanted to make my 2 select boxes required if they select the radio button foreign language so they can make the choices of what language they want and at which level was not sure exactly how to accomplish this
<label for"artlang"=""> Fine Arts or Language: </label><br>
<input name="ArtLang" type="radio" value="Art150" required>Art 150<br>
<input name="ArtLang" type="radio" value="Mus150"required>Music 150 <br>
<input name="ArtLang" type="radio" value="Lang"required>Foreign Language
<label for="language">Language: </label>
<select name="language">
<option name"="" "="" value=" "> </option>
<option name="chinese" value="chinese">Chinese</option>
<option name="french" value="french">French</option>
<option name="german" value="german">German</option>
<option name="greek" value="greek">Greek</option>
<option name="italian" value="italian">Italian</option>
<option name="japanese" value="japanese">Japanese</option>
<option name="latin" value="latin">Latin</option>
<option name="russian" value="russian">Russian</option>
<option name="spanish" value="spanish">Spanish</option>
</select>
<label for="languagelevel">Level: </label>
<select name="languagelevel">
<option name"="" "="" value=" "> </option>
<option name="Elementary" value="elementary">Elementary</option>
<option name="intermediate" value="intermediate">Intermediate</option>
<option name="advanced" value="advanced">Advanced</option>
</select>
I have web page with three dropdown. It is working fine, except for one problem.
When we select any item from one dropdown then it is disabled in the other two dropdowns, but if we again select another item from first dropdown then it disables this item but it also disables the previously selected item.
The previously selected should be enabled when new option is disabled.
Here is the code:
<select id="select1" name="indication_subject[]">
<option value="" selected="selected">a </option>
<option value="1"> Accounting</option>
<option value="2"> Afrikaans</option>
<option value="3"> Applied Information and Communication Technology</option>
<option value="4"> Arabic</option>
<option value="5"> Art and Design</option>
<option value="6"> Biology</option>
<option value="7"> Business Studies</option>
</select>
<select id="select2" name="indication_subject[]">
<option value="" selected="selected">a </option>
<option value="1"> Accounting</option>
<option value="2"> Afrikaans</option>
<option value="3"> Applied Information and Communication Technology</option>
<option value="4"> Arabic</option>
<option value="5"> Art and Design</option>
<option value="6"> Biology</option>
<option value="7"> Business Studies</option>
</select>
<select id="select3" name="indication_subject[]">
<option value="" selected="selected">a </option>
<option value="1"> Accounting</option>
<option value="2"> Afrikaans</option>
<option value="3"> Applied Information and Communication Technology</option>
<option value="4"> Arabic</option>
<option value="5"> Art and Design</option>
<option value="6"> Biology</option>
<option value="7"> Business Studies</option>
</select>
Here is the JavaScript code:
$(document).ready(function(){
$("select").change(function() {
$("select").not(this).find("option[value="+ $(this).val() + "]").attr('disabled', true);
});
});
Demo Link: http://jsfiddle.net/x4E5Q/137/
jsFiddle
Combine the focus event with the change event to achieve what you want:
JavaScript
$(document).ready(function () {
var previous;
$("select").focus(function () {
// Store the current value on focus and on change
previous = this.value;
}).change(function () {
// Do something with the previous value after the change
$("select").not(this).find("option[value=" + previous + "]").prop('disabled', false);
$("select").not(this).find("option[value=" + $(this).val() + "]").prop('disabled', true);
// Make sure the previous value is updated
previous = this.value;
});
});
i have the following part of code of a dropdown menu
<p>
<label for='Select a Category '>Select a Category<font color="red"><strong>*</strong></font>: </label></p>
<p><div id='contactform_category_errorloc' class='err'></div>
<select name="category" class="input">
<option value="0" selected="selected">
[choose yours]
</option>
<option value="Arts and entertainment">Arts and entertainment</option>
<option value="Automotive">Automotive</option>
<option value="Business">Business</option>
<option value="Computers">Computers</option>
<option value="Games">Games</option>
<option value="Health">Health</option>
<option value="Internet">Internet</option>
<option value="News and Media">News and Media</option>
<option value="Recreation">Recreation</option>
<option value="Reference">Reference</option>
<option value="Shopping">Shopping</option>
<option value="Sports">Sports</option>
<option value="World">World</option>
</select>
</p>
i want add in drop down menu an option with value: "custom" that when i select this option appear just below a field blank as input text where i can add my personalized text so i can insert personalized category
it's possible?
maybe you mean something like this: http://jsbin.com/ubihuw/edit#javascript,html
so in php or something you can check then the "my_own_text" field ... dont know what you will exactly do ;)
js:
$('.input').change(function()
{
if($(this).attr('value') == "0") {
$('#choose_own_text').append('<input type="text" id="my_own_text" name="my_own_text" value="Please type in .." />');
} else {
$('#choose_own_text').empty();
}
});
your code ...
<p><div id='contactform_category_errorloc' class='err'></div>
<select name="category" class="input">
<option value="0" selected="selected">
[choose yours]
</option>
<option value="Arts and entertainment">Arts and entertainment</option>
<option value="Automotive">Automotive</option>
<option value="Business">Business</option>
<option value="Computers">Computers</option>
<option value="Games">Games</option>
<option value="Health">Health</option>
<option value="Internet">Internet</option>
<option value="News and Media">News and Media</option>
<option value="Recreation">Recreation</option>
<option value="Reference">Reference</option>
<option value="Shopping">Shopping</option>
<option value="Sports">Sports</option>
<option value="World">World</option>
</select>
<div id="choose_own_text"></div>
</p>