We Keep Coding

Array of select field with same name and different id.

I have an array of select fields all having the same list of option value. What i am trying to get is, if a value is selected in any of the field, it should not show on the other. Below is an example code. For example, if I am having four select fields, if I select 'a' on first field, the value "a" should not appear on the next select field. Same with other values of "b", "c" and "d".
I am trying to use java script for the same. I am in learning phase. help will be really appreciated. Thanks
<select name='list' id='list_1'>
<option value='a'>a</option>
<option value='b'>b</option>
<option value='c'>c</option>
<option value='d'>d</option>
</select>
<select name='list' id='list_2'>
<option value='b'>b</option>
<option value='c'>c</option>
<option value='d'>d</option>
</select>
<select name='list' id='list_3'>
<option value='c'>c</option>
<option value='d'>d</option>
</select>
<select name='list' id='list_4'>
<option value='d'>d</option>
</select>

Try this code that i have written .. Hope should help
<select>
<option value="0"> </option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
<select>
<option value="0"> </option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
<select>
<option value="0"> </option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
$(document).on('change', 'select', function() {
$(this).find('option:selected').addClass('keepit');
$('option[value="' + this.value + '"]:not( .keepit)').remove();
});
https://jsfiddle.net/av46dbo1/

Since you don't want to destroy the data, you need to hide the options.
That's tricky because you have multiple state to combine.
you can make several IF comparisons, hard-code a table of combos for each group and options (yuck), or use a mountain of JS to solve this, but i think that CSS is better.
A simple way to accomplish this is to use CSS; multiple classes on a single element that translate your many states into rules that can be applied instantly and generically (without hard-coding ids or names).
<select name='list' id='list_1'>
<option value='a'>a</option> <option value='b'>b</option>
<option value='c'>c</option> <option value='d'>d</option>
</select>
<select name='list' id='list_2'>
<option value='a'>a</option> <option value='b'>b</option>
<option value='c'>c</option> <option value='d'>d</option>
</select>
<select name='list' id='list_3'>
<option value='a'>a</option> <option value='b'>b</option>
<option value='c'>c</option> <option value='d'>d</option>
</select>
<select name='list' id='list_4'>
<option value='a'>a</option> <option value='b'>b</option>
<option value='c'>c</option> <option value='d'>d</option>
</select>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script>
var combos=[], // store the css we need to define hide/show rules
classes= new Array($("select").length); //a place to store many states
$("select").each(function(i,e){ // for every drop down,
$(this).change(function(){ // when it changes:
classes[i]=this.value; // update array with changed value in right slot
document.body.className=classes.join(" "); // update body class with array
});
});
$("select option[value]").each(function(n, a){ // make css to hide each option if body has the same class:
combos.push( "body."+a.value+" option[value='"+a.value+"'] ");
});
//append the dynamic CSS to the head:
$("head").append("<style> "+combos+"{ display: none; }</style>");
</script>
online demo: http://pagedemos.com/pe2uf5vkx9vh/
if you want to restrict this functionality to certain drop downs, give them a class like <select class=hider and change $("select to $("select.hider in the code above.
if you have values with spaces, you'll need fancier CSS selectors than class, like data-state="|a b|hello world|honda crv|" attribs that you can delimit and hit with partial attribute selectors (body[data-state*='|hello world|']...), but the same pattern can work with many and more complex states.

Fiddle
$(function(){
$('#list_1').change(function(){
var valueToRemove=$(this).val();
$('select').not('#list_1').each(function(){
var currentId=$(this).prop('id');
$("#"+currentId+" option[value="+valueToRemove+"]").remove();
})
})
})

JQuery change selected="true" on select - angularjs

I have this select on my page:
<select id="myselect">
<option value="car" selected="true">Car</option>
<option value="bike">Bike</option>
<option value="plane">Plane</option>
</select>
I need the selected option to be bike ... how do I change it using jQuery?
I've tried:
$("#myselect option:selected").val('bike');
and
$("#myselect").val('bike');
But they don't work

I just created a dummy button to change the selected on click of it. Here is the code
HTML
<select id="myselect">
<option value="car" selected="true">Car</option>
<option value="bike">Bike</option>
<option value="plane">Plane</option>
</select>
<button id="cS">
Change Selected
</button>
JS
$("#cS").on('click',function(){
$('#myselect option[value="bike"]').attr('selected',true)
})
WORKING EXAMPLE

Select on Change will change another select html javascript or jquery

I have a select like this
<select name="category" >
<option value="0" selected>Select a Manufacturer</option>
<option value="10">Acer Technologies</option>
<option value="2">Alcatel</option>
<option value="14">Apple Iphone</option>
<option value="4">Azumi</option>
<option value="12">HTC Corporation</option>
<option value="8">Huawei</option>
<option value="5">LG Electronics</option>
<option value="11">Motorola</option>
<option value="9">Nokia Microsoft</option>
<option value="1">Samsung</option>
<option value="6">Sony Ericsson</option>
<option value="3">Zhong Xing ZTE</option>
</select>
And another select HIDDEN like this
<select name="manufacturer" >
<option value="none" selected>Select a Manufacturer</option>
<option value="Acer Technologies">Acer Technologies</option>
<option value="Alcatel">Alcatel</option>
<option value="Apple Iphone">Apple Iphone</option>
<option value="Azumi">Azumi</option>
<option value="HTC Corporation">HTC Corporation</option>
<option value="Huawei">Huawei</option>
<option value="LG Electronics">LG Electronics</option>
<option value="Motorola">Motorola</option>
<option value="Nokia Microsoft">Nokia Microsoft</option>
<option value="Samsung">Samsung</option>
<option value="Sony Ericsson">Sony Ericsson</option>
<option value="Zhong Xing ZTE">Zhong Xing ZTE</option>
</select>
Both selects are almost the same value, the first one is to save the manufacturer as category and the second one is to save the manufacturers name
The first one is visible while the second one is hidden ( display:none )
What I need is:
If the user select in select one for example
<option value="2">Alcatel</option>
In some way the hidden display:none select must be autoselected to
<option value="Alcatel">Alcatel</option>
Any way to do this?
I already have Jquery running other functions on the site
Thanks

Use change function:
$( "select[name='category']" ).change(function(e) {
$( "select[name='manufacturer']" ).val( $(this).find( "option:selected" ).text() );
});
But if option text in category select do not match option value in manufacturer select - code will not work.

Show specific content based on 4 drop-down selections

I've managed to source some code to achieve the above, however, despite several attempts, I cannot get it to work. Could anyone please assist me on this?
JS in HEAD of HTML file:
<script type="text/javascript">
jQuery(function($){
selects = $('#select-container select'),
results = $('#results-container > div');
selects.change(function(){
var values = '';
selects.each(function(){
values += '.' + $(this).val();
});
results.filter(values).show().siblings().hide();
});
});
</script>
HTML in BODY of HTML file:
<div class="margins1"><h2>Goal</h2>
<div id='select-container'>
<select>
<option value='none'>Select Option</option>
<option value='Fat Loss'>Fat Loss</option>
<option value='Lean Muscle'>Lean Muscle</option>
<option value='Size & Mass'>Size & Mass</option>
</select>
<h2>Dietary Requirements</h2>
<select>
<option value='none'>Select Option</option>
<option value='No Requirements'>No Requirements</option>
<option value='Vegetarian'>Vegetarian</option>
<option value='Vegan'>Vegan</option>
<option value='Gluten Free'>Gluten Free</option>
<option value='Gluten Free (vegetarian)'>Gluten Free (vegetarian)</option>
<option value='Gluten Free'>Gluten Free (vegan)</option>
<option value='Dairy Free'>Dairy Free</option>
<option value='Dairy Free (vegetarian)'>Dairy Free (vegetarian)</option>
<option value='Dairy Free (vegan)'>Dairy Free (vegan)</option>
<option value='Nut Free'>Nut Free</option>
<option value='Nut Free (vegetarian)'>Nut Free (vegetarian)</option>
<option value='Nut Free (vegan)'>Nut Free (vegan)</option>
<option value='Supplement Free'>Supplement Free</option>
<option value='Supplement Free (vegetarian)'>Supplement Free (vegetarian)</option>
<option value='Supplment Free (vegan)'>Supplement Free (vegan)</option>
</select>
<h2>Type of Day</h2>
<select>
<option value='none'>Select Option</option>
<option value='Non-Back-Load Day (10-Day Prep/CNS)'>Non-Back-Load Day (10-Day Prep/CNS)</option>
<option value='Back-Load Day (10-Day Prep/CNS)'>Back-Load Day (10-Day Prep/CNS)</option>
<option value='Non-Back-Load Day (CBL)'>Non-Back-Load Day (CBL)</option>
<option value='Back-Load Day (CBL)'>Back-Load Day (CBL)</option>
</select>
<h2>Cooking Level</h2>
<select>
<option value='none'>Select Option</option>
<option value='Minimal Cooking'>Minimal Cooking</option>
<option value='Moderate Cooking'>Moderate Cooking</option>
<option value='Maximum Cooking'>Maximum Cooking</option>
</select></br>
</div>
Here is the rest of the HTML code that assigns combinations of drop-down selections to a piece of text. I have only done one example:
<div class="margins2"><h1>Meal Plan...</h1>
<div id='results-container'>
<div class='Fat Loss No Requirements Back-Load Day (CBL) Moderate Cooking'> IT WORKS</div>
</div>
The second div class has 4 inputs. It looks strange without commas or separate '' marks but the tutorial doesn't include these and it works. Finally, here is some code from my EXTERNAL CSS file:
#results-container > div { display: none; }
Can anyone please assist me in fixing the issue of no text displaying or identify why this is happening? The JSFiddle link of the tutorial of what I want to achieve can be found here: http://jsfiddle.net/chnZP/
Many thanks

The problem seems to be in how the values in the drop-down lists are written. Because values are directly used as class names you are restricted in your choice of special characters.
Following the tutorial example, if you select alpha, blue and dog the script will turn this into a string ".alpha.blue.dog" and then select the elements containing those 3 class names using the .filter() method.
Because the string is sent to jQuery to manage it has to follow a strict syntax. This means you cannot using spaces, backslashes, parentheses (...and so on) in your class names because they will be parsed differently.
Editing the code slightly will fix it. http://jsfiddle.net/AjdHa/7/
<div id='select-container'>
<select>
<option value='none'>Select Option</option>
<option value='Fat_Loss'>Fat Loss</option>
</select>
<h2>Dietary Requirements</h2>
<select>
<option value='none'>Select Option</option>
<option value='No_Requirements'>No Requirements</option>
</select>
<h2>Type_of_Day</h2>
<select>
<option value='none'>Select Option</option>
<option value='Non-Back-Load_Day_CBL'>Non-Back-Load Day (CBL)</option>
</select>
<h2>Cooking Level</h2>
<select>
<option value='none'>Select Option</option>
<option value='Minimal_Cooking'>Minimal Cooking</option>
<option value='Moderate_Cooking'>Moderate Cooking</option>
<option value='Maximum_Cooking'>Maximum Cooking</option>
</select>
</div>
<div class="margins2">
<h1>Meal Plan...</h1>
<div id='results-container'>
<div class='Fat_Loss No_Requirements Non-Back-Load_Day_CBL Moderate_Cooking'>
IT WORKS
</div>
</div>
</div>

How can I check if Dynamically created Select Boxes have been selected

I have some code that has one contact select box hard coded and then if you click on a add button it adds more contacts. Each contact can be selected from a dropdown and give a location in at location text box.
I want on submit to be able to know if they have selected someone and if not I want to clear out the Location box as there cannot be a location if there is no contact.
<!--- The myContactCount variable is set in another part of javascript this is the current count plus one of the number of current select boxes. --->
<script type="text/javascript" language="javascript">
var e='';
var contactSelectedValue='';
for(var i=1;1<myContactCount;i++){
e = document.getElementById('myContactID_'+i);
contactSelectedValue = e.options[e.selectedIndex].value;
/* I am trying to alert the value so I can then use a if statement to check for null or even change the 'Select a Contact' value to 0 and test for that. */
alert(contactSelectedValue);
}
</script>
<!--- the ID will be 1-100 depending on how many contacts they have added --->
<select name="myContactID_#ID#">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2">Barbara</option>
<option value="3">Cavlin</option>
</select>
So after they are created dynamically they code would look like this.
<select name="myContactID_1">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2">Barbara</option>
<option value="3" selected="selected">Cavlin</option>
</select>
<select name="myContactID_2">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2" selected="selected">Barbara</option>
<option value="3">Cavlin</option>
</select>
<select name="myContactID_3">
<option value="">Select a Contact</option>
<option value="1" selected="selected">Abe</option>
<option value="2">Barbara</option>
<option value="3">Cavlin</option>
</select>

Your script has couple of issues:-
1<myContactCount instead of i<=myContactCount and you are using name in the select and
trying to fetch it by id.
Demo
Html
<select id="myContactID_1">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2">Barbara</option>
<option value="3" selected="selected">Cavlin</option>
</select>
<select id="myContactID_2">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2" selected="selected">Barbara</option>
<option value="3">Cavlin</option>
</select>
<select id="myContactID_3">
<option value="">Select a Contact</option>
<option value="1" selected="selected">Abe</option>
<option value="2">Barbara</option>
<option value="3">Cavlin</option>
</select>
JS
var e='';
var contactSelectedValue='';
for(var i=1;i<=3;i++){
e = document.getElementById('myContactID_'+i);
contactSelectedValue = e.options[e.selectedIndex].value;
/* I am trying to alert the value so I can then use a if statement to check for null or even change the 'Select a Contact' value to 0 and test for that. */
alert(contactSelectedValue);
}