How to Disable the combobox values on selection in multiple comboboxes JQuery? - javascript

I want to disable the values in combobox on selection for multiple comboboxes.
Like i have a four combobox1, combobox2, combobox3, combobox4 with values Select,1,2,3,4 and 5.
Now, if i select value '1' from combobox1, then it should be disabled from all other comboboxes. And then if i select '2' from combobox2, then it should be disabled in combobox1 and combobox3 with value '1' disabled in combobox3 also.
More clearly :
Combobox1 - selected - value '1'
Combobox2 - selected - value '2'
Combobox3 - selected - value '3'
Now the result should be :
Combobox1 - Disabled values - '2','3' but not 1/3/4/5
Combobox2 - Disabled values - '1','3' but not 3/4/5
Combobox3 - Disabled values - '1','2' but not 3/4/5
Combobox4 - Disabled values - '1','2','3' but not 4/5
EDIT
If Combobox1 is selected with Option "Select" then it should disable all the other combobxes except combobox1 and reset all the values with 0 index for all other comboboxes.
But what happening with the code, when i select value 1 from combobox it is disabled for combobox 2 and 3, but when selecting value '2' from combobox2, the value '1' combobox3 gets enabled.
Here is what i have done so far :
HTML Code :
<head>
<title>Language test page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<select name="g1" id="select_g1">
<option value="select1">Select</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
<select name="g2" id="select_g2">
<option value="select2">Select</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
<select name="g3" id="select_g3">
<option value="select3">Select</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</body>
</html>
JQuery Code :
<script>
$(document).ready(function(){
$('select').on('change', function (e) {
$('select option').prop('disabled', false);
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
$("select option:contains('" + valueSelected + "')").each(function(){
if(valueSelected === this.value){
this.disabled = true;
}else{
this.disabled = false;
}
});
});
});
</script>
Any help is appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("select").on("change", function(e){
e.preventDefault();
console.log($(this).val());
var valueSelected = $(this).val()
$("select option:contains('" + valueSelected + "')").prop("disabled", true);
});
});
</script>
</head>
<body>
<select name="g1">
<option value="select1">Select</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>
</select>
<select name="g2">
<option value="select2">Select</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>
</select>
<select name="g3">
<option value="select3">Select</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>
</select>
<select name="g4">
<option value="select4">Select</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>
</select>
</body>
</html>

This disable de option in other "select"
$(document).ready(function(){
$("select").change(function(e){
var id = $(this).attr("id");
var value = this.value;
$("select option").each(function(){
var idParent = $(this).parent().attr("id");
if(id != idParent){
if(this.value == value){
this.disabled = true;
}
}
})
})
});

Did you tried with this.prop('disabled', false) ?

Related

JQuery Chosen set maximum number of options to select on change event

I am using the Jquery Chosen plugin and I want to dynamically set the maximum number of options the user can select on change event of another chosen select. Note: milestone select control is a multiselect
Here is my code,
const $milestone = $('#mainmodallg .modal-body form select[name="milestone"]');
$('#mainmodallg .modal-body form select[name="item_code"]').change( function () {
$milestone.chosen({ max_selected_options: 1 });
$milestone.trigger("chosen:updated");
});
Right now it's not changing it. What am I missing?
You need to get instance of chosen select and then using that update your max_selected_options value.
Demo Code :
$(".chosen-select").chosen({
width: "95%"
});
const $milestone = $('select[name="milestone"]');
$('select[name="item_code"]').change(function() {
$milestone.data('chosen').max_selected_options = 1; //get instance
$milestone.trigger("chosen:updated"); //update
//or
//destroy plugin & re-intialize
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" integrity="sha512-yVvxUQV0QESBt1SyZbNJMAwyKvFTLMyXSyBHDO4BG5t7k/Lw34tyqlSDlKIrIENIzCl+RVUNjmCPG+V/GMesRw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js" integrity="sha512-rMGGF4wg1R73ehtnxXBt5mbUfN9JUJwbk21KMlnLZDJh7BkPmeovBuddZCENJddHYYMkCh9hPFnPmS9sspki8g==" crossorigin="anonymous"></script>
<select data-placeholder="Choose..." class="chosen-select" name="item_code">
<option value=""></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>
</select>
<select data-placeholder="Choose..." class="chosen-select" multiple="" name="milestone">
<option value=""></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>
</select>

How to change values based on the selection from the drop-down list in JavaScript?

In my drop-down list, I have selection 1(A) and selection 2(B). If I select A from the drop-down list, I want to see a name, Janifer. If I select B, I want to see another name, David.
var mylist = document.getElementById("mylist");
if (mylist.value == "1") {
document.getElementById('myalllist').getElementsByTagName('option')[1].selected = 'selected';
}
if (mylist.value == "2") {
document.getElementById('myalllist').getElementsByTagName('option')[2].selected = 'selected';
}
HTML:
<select id="mylist" onchange="fndropoption()">
<option>Select</option>
<option>1</option>
<option>2</option>
</select>
<select id="myalllist" onchange="fndropoption()">
<option value="1">xxxxxxxx</option>
<option value="2">yyyyyyyy</option>
</select>
I couldn't get it to work with onChange attribute either. This works:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var foo=document.getElementById("mylist");
foo.onchange=function() {
if(foo.options.selectedIndex != 0) {
document.getElementById("myalllist").options.selectedIndex = foo.options.selectedIndex-1;
}
}
}
</script>
</head>
<body>
<select id="mylist">
<option value="0" selected="selected">Select</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select id="myalllist" onChange="">
<option value="1">xxxxxxxx</option>
<option value="2">yyyyyyyy</option>
</select>
</body>
</html>
try this - the onchange should be on the first dropdown list - to trigger the change for the second list. Seems to work, eg: selecting 3 in the first list causes the selection of 3 in the second list.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<select id="list1" onChange="changeList()">
<option value="0" selected="selected">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="list2" >
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<script>
function changeList()
{
var selectedOption=document.getElementById("list1").options.selectedIndex;
document.getElementById("list2").options.selectedIndex = selectedOption;
var selectedOption2=document.getElementById("list2").options.selectedIndex;
console.log(selectedOption2)
}
</script>
</body>
</html>

How to select the given option in dropdown

I've a dropdown
<select id="ddl1">
<option value="0">number</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>
</select>
now what i'm doing is as soon as user clicks on ddl1 i change its default value to 4 like this
$(function () {
var defaultValue = "4";
$('#ddl1').click(function () {
var select_val = $('#ddl1').val();
if (select_val == "0")
$('#ddl1').val(defaultValue);
});
});
but now the problem is when user tries to select the default option of dropdown i.e number, option 4 is selected. Any ideas how to fix this?
The problem is when the user just clicks on dropdown -> option4 must be selected and when user clicks on option number -> option number must be selected instead of option 4.
Not sure why you're doing that but focusin or focus events can help you achieve that as follows:
$(function() {
$('#ddl1').on('focusin', function() {
this.value != 0 || $(this).val( 4 );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="ddl1">
<option value="0">number</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>
</select>
You should call this function on change, not click - else, like you said, as soon as you click an option is selected.
$('#ddl1').change(function () {
DEMO
Edit: You should use a class to give the feel of the default option, you don't actually want it set to selected EACH time the user clicks:
<select id="ddl1">
<option value="0">number</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4" class="default">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
.default {
color: blue;
}
is this what you're looking for? http://jsfiddle.net/swm53ran/84/
$(function () {
var defaultValue = "4";
var count = 0;
$('#ddl1').click(function () {
if (count < 1) {
$('#ddl1').val(defaultValue);
count++;
}
});
});

5 select boxes, hide values on each selected item

I have select boxes, I would like to hide (delete) items from options that are already selected:
<select name="gets" class="gets">
<option value="0">SELECT</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>
</select>
<select name="gets" class="gets">
<option value="0">SELECT</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>
</select>
<select name="gets" class="gets">
<option value="0">SELECT</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>
</select>
<select name="gets" class="gets">
<option value="0">SELECT</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>
</select>
So if I choosed option 1 from 1st select box, it should disappear from the rest, if I choose option 3 on select box 4, it should disappear from the rest
Thanks in advance
Say like below:
$('.gets').change(function(){
var value = $(this).val();
$('.gets').not(this).find('option[value="'+value+'"]').hide();
})
DEMO
If you want to exclude for SELECT option say like below
$('.gets').change(function(){
var value = $(this).val();
if(value!=0)
$('.gets').not(this).find('option[value="'+value+'"]').hide();
})
You'll need to find all the options with the same value in the other select's and hide them.
I would use something like this:
var selects = $('select');
selects.bind('change', function(e) {
var val = this.value;
//show all options
selects.find('option').show();
selects.each(function() {
if(!this.value) return;
//hide the selected value in the other selects
selects.find('option[value="' + this.value + '"]')
.filter(':not(:checked)')
.filter(':not([value="0"])')
.hide();
});
});
Example
You can try this:
$("select").on("change", function(){
var selectVal = $(this).val();
$("select").not($(this)).find("option[value="+ selectVal +"]").remove();
});
fiddle

selected value from select box in javascript

I want to get the value of the select box using javascript i have the following code.
html part
<select name="marked" id="marked" onchange="checkdata(this); ">
<option value="">SELECT</option>
<option value="all">ALL</option>
<option value="none">NONE</option>
<option value="read">READ</option>
<option value="unread">UNREAD</option>
</select>
script
<script type="text/javascript">
function checkdata()
{
for(var i=0; i < document.myform.message.length; i++)
{
document.myform.message[i].checked=true;
}
}
</script>
i tried the code
var all = document.myform.marked.options[document.myform.selectedIndex].value;
alert(all);
no alert is coming
i also tried
var all= document.getElementById('marked').value;
alert(all);
alert is coming but the value for every selection in "1"
You missed the '.marked':
var all = document.myform.marked.options[document.myform.marked.selectedIndex].value;
alert(all);
var e = document.getElementById("ctl00_cphContent_ddlVoteType");
var strOption = e.options[e.selectedIndex].value;
working fine for me. please check
Try
<form method="POST" name="me">
<select size="1" name="D1" onChange="checkData()">
<option value="99">Default</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>
<script Language="JavaScript"><!--
function checkData()
{
var myTest =
me.D1.options[me.D1.options.selectedIndex].value;
///or me.D1.options[me.D1.selectedIndex].value
alert(myTest);
}
</script>
the following code is working for me
Java Script :
function checkdata()
{
alert(document.getElementById('marked').value);
}
HTML :
<select name="marked" id="marked" onchange="checkdata(this);">
<option value="">SELECT</option>
<option value="all">ALL</option>
<option value="none">NONE</option>
<option value="read">READ</option>
<option value="unread">UNREAD</option>
</select>
get the selected value onchange
<script Language="JavaScript">
function checkdata(marked){
var marked_value = marked.value; // store the selected value marked_value
alert(marked_value); // do further processing with "marked_value" if needed
}
</script>
for option selects you don't use "checked" that is for radio and checkbox

Categories