Develop Reference

I have two select boxes. I want to enable second select box only if i click a particular option in first select box [duplicate]

I have two dynamic dropdowns but both dropdown's value and options are same. What I want that if user select 'apple' from first dropdown then the second dropdown's apple option will be disabled (using javascript). In short user can not select same value from both.
//first drop down
<select name="fruit1">
<option value="1">Apple</option>
<option value="2">Mango</option>
</select>
//second dropdown
<select name="fruit2">
<option value="1">Apple</option>
<option value="2">Mango</option>
</select>
I have tried with jQuery:
function witness()
{
var op=document.getElementById("witness1").value;
$('option[value='+op+']').prop('disabled', true);
}
But with this both dropdown's value are disabled and if I select mango then apple will not enabled it remains disabled. I know I did not pass id so both dropdown value are disabled but where should i pass ?
If user select apple then in second dropdown apple will be disabled, I want to do this using Javascript or jQuery.

Fiddle: https://jsfiddle.net/3pfo1d1f/
To get the functionality you're after, you need to hook into the change event on the first dropdown, in order to disable the matching element in the second drop-down.
I also initialised the first element in the second dropdown as disabled ( as this chosen by default in the first dropdown)
Used jquery as you are:
HTML:
<!-- first dropdown -->
<select id="fruit1">
<option value="1">Apple</option>
<option value="2">Mango</option>
</select>
<br /> <br />
<!-- second dropdown -->
<select id="fruit2">
<option value="1" disabled>Apple</option>
<option value="2">Mango</option>
</select>
JQuery:
$('#fruit1').on( "change", function() {
var op = $( this ).val();
$('#fruit2 option').prop('disabled', false);
$('#fruit2 option[value='+op+']').prop('disabled', true);
});
This should still work, no matter how many options you have in both the dropdowns

Try this out:
HTML:
<select id='fruit1' onchange="witness();">
<option selected></option>
<option value="1">Apple</option>
<option value="2">Mango</option>
</select>
<select id='fruit2'>
<option selected></option>
<option value="1">Apple</option>
<option value="2">Mango</option>
</select>
JQuery:
function witness(){
$("#fruit2 option").each(function(){
if($("#fruit1 option:selected").val() == $(this).val())
$(this).attr("disabled", "disabled");
else
$(this).removeAttr("disabled");
});
}
You can see a working exemple here:
https://jsfiddle.net/mqjxL4n0/

<select name="firstselect" id="firstselect">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
</select>
<select name="secondselect" id="secondselect">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
</select>
<script>
$(document).ready(function(){
$('#firstselect').change(function(){
var firstselected = $(this).val();
if(firstselected ){
$('#secondselect option').each(function(){
$(this).prop('disabled', false);
if($(this).val()==firstselected )
$(this).prop('disabled', true);
});
}
else {
$('#secondselect option').each(function(){
$(this).prop('disabled', false);
});
}
});
});
</script>

How can I keep the same position on my drop down menu once a user selects it on the drop-down menu [duplicate]

This question already has answers here:
Stay on selected item on drop down menu using Javascript
(2 answers)
Closed 6 years ago.
I have a drop down field on my form. When I select a value from the drop down it immediately resets the focus to the top of the form.
To be clearer I have a drop down menu at the top of the screen and several input fields. The user would have to scroll down to the actual drop down field in order to select it. Once they select the value the page scrolls back to the top.
How can I keep the position the user selected on the form once a user selects a value from the drop down? I've tried nearly everything and I just need some help to get this finished.
Here is ALL my code
JSFiddle
document.addEventListener("DOMContentLoaded", function(event) {
// creates the page dynamically
function GetSelectedItem(){
var option = document.getElementById("locale").value;
}
document.getElementById("locale").addEventListener('change', function(event) {
var selected = event.target.options[ event.target.selectedIndex ].value
console.log(selected);
window.location.hash = selected;
});
});
<div id="country-select">
<form action="" method="get">
<select id="locale" name="locale">
<option value="en_US" title='0'>English(US)</option>
<option value="en_GB" title='1'>English(UK)</option>
<option value="bg_BG" title='2'>Bulgarian</option>
<option value="cs_CS" title='3'>Czech</option>
<option value="da_DK" title='4'>Danish</option>
<option value="de_DE" title='5'>German</option>
<option value="ek_GR" title='6'>Greek</option>
<option value="es_ES" title='7'>Spanish</option>
<option value="et_ET" title='8'>Estonian</option>
<option value="fi_FI" title='9'>Finnish</option>
<option value="fr_FR" title='10'>French</option>
<option value="hu_HU" title='11'>Hungarian</option>
<option value="it_IT" title='12'>Italian</option>
<option value="lt_LT" title='13'>Lithuanian</option>
<option value="lv_LV" title='14'>Latvian</option>
<option value="nl_NL" title='15'>Dutch</option>
<option value="no_NO" title='16'>Norwegian</option>
<option value="pl_PL" title='17'>Polish</option>
<option value="pt_PT" title='18'>Portugese</option>
<option value="ro_RO" title='19'>Romanian</option>
<option value="sk_SK" title='20'>Slovak</option>
<option value="sl_SL" title='21'>Slovenian</option>
<option value="sv_SE" title='22'>Swedish</option>
</select>
<input value="Select" type="submit"/>
</form>
</div>
I know it would have to do with specifically the javascript part of my code.

I think this should work for you, I am just taking the focus away on change.
See fiddle https://jsfiddle.net/jjswhccd/1/
$("select#locale").change(function() {
$("#locale").blur();
});

HIding or Showing Dropdown Options Based On Another Dropdown

I have 16 fields that need to be sorted by state. Originally, I made it so that there was four different divs because there's four different states people can choose from.
However, I ran into the issue of emails not going to the right people because the 16 fields are agents that people can choose and those agents need to have an email sent to them if they're chosen.
I keep finding multiple solutions for showing and hiding different divs but how do I hide or show options in a single sub-drop down menu?
Parent Dropdown Menu
State 1
State 2
State 3
State 4
Agent Dropdown Menu
Agent 1
Agent 2
Agent 3
Etc (all the way to agent 16)
How can I make it so that when a user selects State 1, it only shows a few options from the agent dropdown menu? The only solutions I can find are ones that have you split the sub-menu into different divs. We're using Contact Form 7 and the only thing people can see are the names but the emails are attached and those agents have to get an email when someone selects them.

HTML:
<select onchange="changeValues()" id="main-dd">
<option value="0">State 1</option>
<option value="1">State 2</option>
<option value="2">State 3</option>
<option value="3">State 4</option>
</select>
<select id="agent-dd"></select>
Javascript:
var AgentDDValues = [
['Agent 1','Agent 2'],
['Agent 3'],
['Agent 4'],['Agent 5'],
['Agent 6'],['Agent 7'],['Agent 8']
];
function changeValues(){
var e = document.getElementById("main-dd");
var selVal = e.options[e.selectedIndex].value;
$("#agent-dd").empty();
for(var i=0;i<AgentDDValues[selVal].length;i++){
$("#agent-dd").append('<option>'+AgentDDValues[selVal][i]+'</option>');
}
}

You can trigger off the change state in a select dropdown and hide options in the second one
HTML
<select id="s1">
<option disabled selected>pick an option</option>
<option data-id="1">option 1</option>
<option data-id="2">option 2</option>
</select>
<select id="s2">
<option class="1">sub option 1</option>
<option class="1">sub option 2</option>
<option class="1">sub option 3</option>
<option class="1">sub option 4</option>
<option class="2">sub option 5</option>
<option class="2">sub option 6</option>
<option class="2">sub option 7</option>
<option class="2">sub option 8</option>
</select>
Javascript/Jquery
$("#s1").on("change", function(){
var id = $("#s1 :selected").data("id");
if(id == 1){
$(".1").show();
$(".2").hide();
}
if(id == 2){
$(".1").hide();
$(".2").show();
}
});
Have a look at this fiddle I created
UPDATE:
In response to your comments you can add classes via Jquery like this:
var count = 0;
$("#s2 option").each(function(){
if(count < 4){
$(this).addClass("1");
}
else $(this).addClass("2");
count++;
});
This just uses a simple counter to add a "1" class to the first half of the options and then switch over to a "2" class for the second half.

Select Option dropdown taking time to close specifically in Chrome

I have two select option buttons on single web page but on different tabs. I want to change the other one button value on change of any one button and assign it to some element like span in example code. All things are working perfectly but it just taking time to close dropdown when i am changing value. in firefox there is no problem
jsfiddle
My HTML Code
<select class="select one" >
<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><br><br><br>
<select class="select two">
<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>
<br><br><br>
<span class="value"></span>
JQuery
var lang = $('select.one').val();
$('span.value').text(lang);
$('select.select').change(function(){
lang = $(this).val();
$('span.value').text(lang);
if ($(this).hasClass('one')) {
$('.two').val($(this).val()).trigger('change');
}
else{
$('.one').val($(this).val()).trigger('change');
}
});
Thanks in advance

fixed jsFiddle demo
It's cause you're concurrently triggering changes. Cool that down, this is all you need:
var lang = $('select.one').val();
$('span.value').text(lang);
$('select.select').change(function () {
lang = this.value;
$('span.value').text(lang);
$('.select').val(lang);
});

You can try this instead:
var lang = $('.select.one').val();
$('.value').text(lang);
$('.select').change(function (e) {
$('.select').val(this.value);
$('.value').text(this.value);
});
The issue was .trigger() method, that was traversing up to the dom for lookup and setting the values to each elem again and again.
Check the updated fiddle.

Remove option in select

<select class="one">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />
<select class="one">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />
<select class="one">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
$(".one").change(function(){
})
I would like make - for example if i select in first position option 1 then i others selects this option should be removed.
So if i in first select i select 1 then in select second and third i have only option 2 and 3. If in second select i select 2 then in last select i have only option 3.
How can i make it? I would like use jQuery.
LIVE: http://jsfiddle.net/9N9Tz/1/

If you need to sort something, consider using something like jQuery UI sortable as a bunch of drop down menus make a really poor UX for that.
But to answer your question:
var $selects = $('.one');
$selects.on("keyup click change", function(e) {
$selects.not(this).trigger('updateselection');
}).on("updateselection", function(e, data) {
var $this = $(this);
$this.children().show();
$selects.not(this).each(function() {
var value = $(this).val();
if (value) {
$this.children('[value="' + value + '"]').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="one">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />
<select class="one">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />
<select class="one">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Hiding an option works in current firefox. I'm not sure about legacy browser. Hiding, but not removing, the element makes sure that you can change your selection without having crippled your input elements.

Here you go http://jsfiddle.net/Calou/9N9Tz/6/.
When the value of the <select>s changes, just take this value and search for the <option>s with this value in the others <select>s and remove them.
$(".one").change(function(){
var val = this.value
if (val !== '') {
$(this).siblings().find('option[value=' + val + ']').remove()
}
})

// As soon as all selects have one class, you'll have to distinguish them:
$(".one").each(function() {
// Now this corresponds to one select (in the loop over all)
$(this).change(function() {
// Fix what've done before
$('option').show();
// Find every other select, find an option in it
// that has the same value that is selected in current select
// (sorry for the description)
$('.one').not(this).find('option[value=' + $(this).find('option:selected').val() +']').hide();
});
})​;​
jsFiddle

It will be easy if you use different class for second and third select element
$(".one").change(function(){
var val = parseInt($(this).val());
$('.two,.three').find('option:contains('+val+')').remove();
});
EDIT:
Updated code to apply for multiple selects. [Thanks to all commentators and Alex for bringing it to notice ]
$(".one").change(function(){
var val = parseInt($(this).val());
$(this).siblings().find('option:contains('+val+')').remove();
});