We Keep Coding

Change the background colour of Dropdown list depending on values using jQuery [duplicate]

This question already has answers here:
jQuery ID selector works only for the first element
(7 answers)
Closed 5 years ago.
This the HTML code
<label class="col-lg-6">37.sample 1 </label>
<select class="form-control" id="colorchg">
<option></option>
<option value="green">YES</option>
<option value="red">NO</option>
<option value="gray">N/A</option>
</select>
<label class="col-lg-6">38. sample 2</label>
<select class="form-control" id="colorchg">
<option></option>
<option value="green">YES</option>
<option value="red">NO</option>
<option value="gray">N/A</option>
</select>
<label class="col-lg-6">39. sample 3</label>
<select class="form-control" id="colorchg">
<option></option>
<option value="green">YES</option>
<option value="red">NO</option>
<option value="gray">N/A</option>
</select>
HTML output
:
Script
$(document).ready(function() {
$("#colorchg").each(function() {
var color = $("#colorchg").val();
$(this).css("background", color);
});
$("#colorchg").change(function() {
var color = $("#colorchg").val();
$(this).css("background", color);
});
});
But it only changes the bg-color of the first instance
How should the script change in order to implement it in every dropdown list

Try this:
$(document).ready(function() {
$(".colorchg").each(function() {
$(this).css("background", $(this).val());
});
$(".colorchg").change(function() {
$(this).css("background", $(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="col-lg-6">37.sample 1 </label>
<select class="form-control colorchg">
<option></option>
<option value="green">YES</option>
<option value="red">NO</option>
<option value="gray">N/A</option>
</select>
<label class="col-lg-6">38. sample 2</label>
<select class="form-control colorchg">
<option></option>
<option value="green">YES</option>
<option value="red">NO</option>
<option value="gray">N/A</option>
</select>
<label class="col-lg-6">39. sample 3</label>
<select class="form-control colorchg">
<option></option>
<option value="green">YES</option>
<option value="red">NO</option>
<option value="gray">N/A</option>
</select>
By using classes, jQuery will find more than one element to use. ID's need to be unique, so it assumes it's only one element.
Instead of searching for the value again in the functions, you should use this, otherwise the backgrounds will change to whatever the first option is set to.

You can't use the same ID multiple times on a page - IDs need to be unique. If you try to find it, it'll only get the first one, since only one should exist. Instead use the class .form-control as your selector.

id need to be unique. Beside create a common function and trigger that function onchange of select.The value val() will give current selected option. Use that value as css property value
function changeBck(elem) {
$(elem).css("background", $(elem).val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="col-lg-6">37.sample 1 </label>
<select class="form-control" id="colorchg_1" onchange='changeBck(this)'>
<option></option>
<option value="green">YES</option>
<option value="red">NO</option>
<option value="gray">N/A</option>
</select>
<label class="col-lg-6">38. sample 2</label>
<select class="form-control" id="colorchg_2" onchange='changeBck(this)'>
<option></option>
<option value="green">YES</option>
<option value="red">NO</option>
<option value="gray">N/A</option>
</select>
<label class="col-lg-6">39. sample 3</label>
<select class="form-control" id="colorchg_3" onchange='changeBck(this)'>
<option></option>
<option value="green">YES</option>
<option value="red">NO</option>
<option value="gray">N/A</option>
</select>

HTML form with checkbox options to select fieldset

I have a form that is like the following:
<label>
scale a<input type="radio" name="sellorbuy" value="Yes" id="rdYes" />
</label>
<label class="leftspace">
scale b<input type="radio" name="sellorbuy" value="No" id="rdNo" />
</label>
<p class="searchpg">Price</p>
<fieldset id="sell">
<select id="pricemin" name="minsell" class="form-control">
<option value="50000">Min Price</option>
<option value="100000">£100,000</option>
<option value="200000" >£200,000</option>
<option value="300000" >£300,000</option>
<option value="400000" >£400,000</option>
</select>
<select id="pricemax" name="maxsell" class="form-control">
<option value="5000000">Max Price</option>
<option value="100000">£100,000</option>
<option value="200000">£200,000</option>
<option value="300000">£300,000</option>
<option value="400000">£400,000</option>
<option value="500000">£500,000</option>
</select>
</fieldset>
<fieldset id="let" style="display:none;">
<select id="lpricemin" name="minbuy" class="form-control">
<option value="500">Min Price</option>
<option value="500">£500</option>
<option value="600">£600</option>
<option value="700">£700</option>
<option value="800">£800</option>
<option value="900">£900</option>
</select>
<select id="lpricemax" name="maxbuy" class="form-control">
<option value="5000">Max Price</option>
<option value="600">£600</option>
<option value="700">£700</option>
<option value="800">£800</option>
<option value="900">£900</option>
<option value="1000">£1000</option>
<option value="1150">£1150</option>
</select>
</fieldset>
This switches fieldsets by using the following:
$("input[name='sellorlet']").change(function () {
$("#sell").toggle(this.value == "Yes");
$("#let").toggle(this.value == "No");
});
The trouble I am having is the search form that is submitted and displayed on the next page so we carry over the contents of the form. If someone has selected the 'Scale B' then that is already toggled on the next page but the fieldset has not changed? Is there any way to change to the jquery to detect which checkbox is toggled and change the fieldset accordingly or even modify the switch to make it work better?
Created a fiddle to show how the form works https://jsfiddle.net/v3waaa20/1/

Some slight changes and triggering change on load can do the trick.
$("input[name='sellorbuy']").change(function () {
value = $("input[name='sellorbuy']:checked").val();
$("#sell").toggle(value == "Yes");
$("#let").toggle(value == "No");
}).change();

Change the values of radio buttons depending on dropdown selection

Hi I have been trying to set radio buttons to certain values depending on which select drop down was chosen.
First the select statement:
<select id="department" name="department" class="input-xlarge" onchange="setDefault();">
<option value="" selected></option>
<option value="1">Read Only</option>
<option value="2">HR Staff</option>
<option value="3">Select 3</option>
<option value="4">Select 4</option>
<option value="7">Select 5</option>
</select>
I created a function that I thought would allow me to set the value, depenting on what is selected.
<script>
function setDefault() {
if (department.val() == '1'){
alert('One');
}
$("#radio-0").prop("checked", true);
</script>
I thought that if the val of department (the select drop down) was equal to 1 then set this value.
The error that I get in the console window is
*Uncaught TypeError: undefined is not a function*
I know this should be simple but as a jQuery novice I know I'm probably making a simple mistake.
Overall the goal would be to set a series of radio buttons to a specific value depending on the drop down selection. For example, if Read only was selected, certain values would be set as a 1, 2 ,3 4 or 5 (for a radio button) and so on depending on the drop down selection.
Thanks

Use jQuery onchange function.
$(document).ready(function () {
$("#department").change(function () {
if(this.value=='1')
{
alert("one");
}
$("#radio-0").prop("checked", true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<select id="department" name="department" class="input-xlarge">
<option value="" selected></option>
<option value="1">Read Only</option>
<option value="2">HR Staff</option>
<option value="3">Select 3</option>
<option value="4">Select 4</option>
<option value="7">Select 5</option>
</select>
<input type="radio" id="radio-0">

I would recommend using javascript for this. It is such a small request that you don't really need an external libarary.
The HTML based from yours and including some radio buttons
<select id="department" name="department" class="input-xlarge" onchange="setDefault(this);">
<option value="" selected></option>
<option value="1">Read Only</option>
<option value="2">HR Staff</option>
<option value="3">Select 3</option>
<option value="4">Select 4</option>
<option value="7">Select 5</option>
</select><br />
<input type="radio" name="selectedop" id="radio-1" /><br />
<input type="radio" name="selectedop" id="radio-2" /><br />
<input type="radio" name="selectedop" id="radio-3" /><br />
<input type="radio" name="selectedop" id="radio-4" /><br />
<input type="radio" name="selectedop" id="radio-7" />
Then you simply add this javascript in your head. It selects the radio based on the value by combining "radio-" and the value to make the id.
function setDefault(input) {
document.getElementById("radio-" + input.value).checked = true;
}
JsFiddle Example: http://jsfiddle.net/bpmf3cks/

Try
$('#department').on('change',function() {
if ($(this).val() == '1') alert($(this).val())
})
http://jsfiddle.net/5x0h5g73/1/

button to clear all select fields

<form method="post" action="asdasd" class="custom" id="search">
<select name="sel1" id="sel1">
<option value="all">all</option>
<option value="val1">val1</option>
<option value="val2" selected="selected">val2</option>
</select>
<select name="sel2" id="sel2">
<option value="all">all</option>
<option value="val3">val3</option>
<option value="val4" selected="selected">val4</option>
</select>
</form>
I want to select the first field of all the Select (so set the value "all" to all the Select) clicking a button

Your form should have a reset button
<form method="post" action="asdasd" class="custom" id="search">
<select name="sel1" id="sel1">
<option value="all">all</option>
<option value="val1">val1</option>
<option value="val2" selected="selected">val2</option>
</select>
<select name="sel2" id="sel2">
<option value="all">all</option>
<option value="val3">val3</option>
<option value="val4" selected="selected">val4</option>
</select>
<input type="button" name="Reset" />
</form>
After adding a reset button input element to your form below code should reset all select fields.
jQuery( "input[name=Reset]" ).click( function(){ //jQuery click event
jQuery( "select" ).each(function() { //for each select type
$(this).val( "all" );
});
});

You have to add attribute selected to the first option of all select box.
$("select option:first").attr('selected','selected');
See my fiddle
Hope it helps.

You don't need to use jquery. This can be done by JavaScript
document.getElementById("sel1").selectedIndex = 0;
Here is my JSFiddler demo for complete code.
This is jQuery way to achieve above
$("select").val("0");
Or to be more specific
$("#sel1 , #sel2").val("0");

Activate particular drop-down list when user selects the radio button in AngularJS

Before I explain my problem, below is my simple code
<body>
<div>
<input type="radio" name="salary"/>Per Year
<select>
<option value="0">All</option>
<option value="40000">$40,000.00+</option>
<option value="50000">$50,000.00+</option>
</select>
</div>
<div>
<input type="radio" name="salary"/>Per Hour
<select>
<option value="0">All</option>
<option value="20">$20.00+</option>
<option value="25">$25.00+</option>
</select>
</div
</body>
What am I trying to achieve is when user selects radio button with value "Per Year".I want to disable the other radio button[with value "Per Hour"].So he can't select the values from other drop-down list.
How can I do this in AngularJS?Is their any directive that could solve this??

http://jsbin.com/boqexu/1/edit
<body ng-app="app">
<div ng-controller="firstCtrl">
<div>
<input type="radio" name="salary" ng-model="type" value="year"/>Per Year
<select ng-model="year.value" ng-disabled="type =='hour'">
<option value="0">All</option>
<option value="40000">$40,000.00+</option>
<option value="50000">$50,000.00+</option>
</select>
</div>
<div>
<input type="radio" name="salary" ng-model="type" value="hour"/>Per Hour
<select ng-disabled="type =='year'" ng-model="hour.value">
<option value="0">All</option>
<option value="20">$20.00+</option>
<option value="25">$25.00+</option>
</select>
</div>
</div>
</body>