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 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>

Disable Drop Down Options Once Chosen In Other Dropdown

I have 12 drop downs input areas, 1 for each of the months of the year. Each drop down has the choice of the same 24 options.
I need to make it so that, for example, if in the January drop down box you chose option #4, that option #4 cannot be selected in any of the other drop down menus. It would still be in the drop down, but would just be disabled.
This would have an ajax trigger to check the value against the other drop downs and dynamically change the other drop down menus.
Is there a loop I can do to check and disable these values dynamically without having to make a lot of if statements?

You can use jQuery to find the option element in all other dropdowns (in my example, designated by a certain class...and can easily be changed to another selector - I thought the selector "select" was too broad), and then disable the actual option element by using .prop("disabled", true). But it's a little more tricky than this, as you need to keep track of the previous selected value to enable the dropdown again when a different value is chosen. Here's an example that will hopefully help:
http://jsfiddle.net/p5Arj/
$(document).ready(function () {
$(".test").each(function () {
var $self = $(this);
$self.data("previous_value", $self.val());
});
$(".test").on("change", function () {
var $self = $(this);
var prev_value = $self.data("previous_value");
var cur_value = $self.val();
$(".test").not($self).find("option").filter(function () {
return $(this).val() == prev_value;
}).prop("disabled", false);
if (cur_value != "") {
$(".test").not($self).find("option").filter(function () {
return $(this).val() == cur_value;
}).prop("disabled", true);
$self.data("previous_value", cur_value);
}
});
});
So this disables all other dropdowns' same options when you choose one, and makes sure that when you choose another, the previous one is enabled in all other dropdowns. For example, choose "3" in the first dropdown...look at the second dropdown - see that "3" is disabled...go back to the first dropdown and choose "1"...look at the second dropdown - see that "3" is enabled again but "1" is disabled. That's what the use of .data is for in my code.
Of course, you can replace the use of value with selectedIndex if you are 100% sure that all of the options will be the same for each select in question.

http://jsfiddle.net/Rk5e9/9/
Only about 10 lines, and no ajax!
<select class="unique-value">
<option value="-1" selected="selected">Default</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
<select class="unique-value">
<option value="-1" selected="selected">Default</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
<select class="unique-value">
<option value="-1" selected="selected">Default</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
Script:
$(document).ready(function(){
$('.unique-value').focus(function(){
var val = $(this).val();
$(this).attr('data-current-value', val);
});
$('.unique-value').change(function(){
var val = $(this).val();
if(val != -1)
$('.unique-value option[value=' + val + ']').attr('disabled', 'disabled');
var oldval = $(this).attr('data-current-value');
$('.unique-value option[value=' + oldval + ']').removeAttr('disabled');
});
});​

I think this would be the shortest solution:
<select class="select-value">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
<select class="select-value">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
<select class="select-value">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
and the jquery code:
$(document).on('change', '.select-attendee', function(){
$current=$(this);
$(".select-attendee").not($current).children("option[value='"+$current.val()+"']").attr('disabled', "disabled");
});

Assuming you had a dropdown for each month, and an option for each week.
<select class="month" id="october">
<option class="week" value="week1">Week One</option>
<option class="week" value="week2">Week Two</option>
</select>
Lets say you select a week, and you listen for the event.
$(".month").change(function(event) {
// Get the week just selected.
var selectedWeek = $(this).children(".week:selected").val();
// Enabled all weeks before disabling the selected week.
$("option.week").removeAttr("disabled");
// Disable all week options matching this selection.
$("option.week[value="+selectedWeek+"]").attr("disabled", "disabled");
});

Multiple value to select field

I want the user to click the select box and when have selected any option redirect to index.php?id={variableId}&itemId={secondVariableId}
Like:
<select name="select">
<option value="id=1&itemId=2">One</option>
<option value="id=1&itemId=3">One</option>
<option value="id=2&itemId=1">One</option>
[...]
</select>
But, I can not imagine where to start

<select name="select" onchange="window.location='index.php?' + this.value;">
<option value="default">- select -</option>
<option value="id=1&itemId=2">One</option>
<option value="id=1&itemId=3">One</option>
<option value="id=2&itemId=1">One</option>
[...]
</select>

You can use the "onChange()" function, but does not work properly in some versions of IE, as I remember.

I think this is what you want (if i'm understanding correctly and assuming jquery is being used).
$("select").on("change", function() {
window.location = 'index.php?' + $(this).val();
});

What you can do is add the option multiple=yes to your select tag. When this is posted back, it will be in an array. Here's a good sample that you can test with: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple

Hiya this might help: sample demo http://jsfiddle.net/5NCQg/34/
Jquery COde
$(document).ready(function () {
var url = "http://forum.jquery.com?" // in this case your URL
$("select#foobar").change(function() {
alert('change');
url= url + $(this).val();
alert(url);
window.location = url;
});
});​
HTML
<form id="temp1">
<select id="foobar">
<option value="nothing"> --select-- </option>
<option value="id=foo&itemid=bar"> click1 </option>
<option value="id=foo&itemid=bar"> click2 </option>
</select>
</form>​
CHeers!