Set Hidden Value Depending on Selection of two Dropdowns - javascript

I am trying to set a hidden value depending on the values set for two different dropdown boxes.
Here is what I have so far, it is not working, I expect it to set the value of #bundle_option[5] to 4 when the dropdown #bundle-option-5-color is set to Black and #bundle-option-5-size is set to Child.
<script type='text/javascript'>
$j(document).ready(function() {
$j('#bundle-option-5-color').change(function() {
if ($j(this).find('option:selected').text() == 'Black' &&
$j('#bundle-option-5-size').find('option:selected').text() == 'Child')
{
$j('#bundle_option\\[5\\]').val('4');
}
});
});
</script>
HTML:
<select id="bundle-option-5-color" name="bundle_option[5]" bundle-option-select="" required-entry="" required="">
<option value="">Choose a selection...</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
<option value="Pink">Pink</option>
<option value="Purple">Purple</option>
<option value="Red">Red</option>
<option value="Teal">Teal</option>
<option value="White">White</option>
</select>
<select id="bundle-option-5-size" name="bundle_option[5]" bundle-option-select="" required-entry="" required="">
<option value="">Choose a selection...</option>
<option value="Child">Child</option>
<option value="Youth">Youth</option>
<option value="Adult Small">Adult Small</option>
<option value="Adult Medium">Adult Medium</option>
<option value="Adult Large">Adult Large</option>
<option value="Adult X-Large">Adult X-Large</option>
<option value="Adult XX-Large">Adult XX-Large</option>
</select>
<input id="bundle_option[5]" type="hidden" value="" name="bundle_option[5]">

Bind your function to the both change events:
$(document).ready(function() {
var fn = function() {
if ($('#bundle-option-5-color').find('option:selected').text() == 'Black' &&
$('#bundle-option-5-size').find('option:selected').text() == 'Child')
{
$('#bundle_option\\[5\\]').val('4');
}
};
$('#bundle-option-5-color').change(fn);
$('#bundle-option-5-size').change(fn);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="bundle-option-5-color" name="bundle_option[5]" bundle-option-select="" required-entry="" required="">
<option value="">Choose a selection...</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
<option value="Pink">Pink</option>
<option value="Purple">Purple</option>
<option value="Red">Red</option>
<option value="Teal">Teal</option>
<option value="White">White</option>
</select>
<select id="bundle-option-5-size" name="bundle_option[5]" bundle-option-select="" required-entry="" required="">
<option value="">Choose a selection...</option>
<option value="Child">Child</option>
<option value="Youth">Youth</option>
<option value="Adult Small">Adult Small</option>
<option value="Adult Medium">Adult Medium</option>
<option value="Adult Large">Adult Large</option>
<option value="Adult X-Large">Adult X-Large</option>
<option value="Adult XX-Large">Adult XX-Large</option>
</select>
<input id="bundle_option[5]" type="text" value="" name="bundle_option[5]">

As mentioned in the comments you need to trigger your function for both option box change events. You can do that with this wildcard selector $('[id^=bundle-option-5]').change(function() {}).
Please find your code below and here at jsFiddle.
$(document).ready(function() {
$('[id^=bundle-option-5]').change(function() {
//console.log(this);
// size or color changed
if ($('#bundle-option-5-color').find('option:selected').text() == 'Black' &&
$('#bundle-option-5-size').find('option:selected').text() == 'Child')
{
$('#bundle_option\\[5\\]').val('4');
alert('black and child chosen!');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="bundle-option-5-color" name="bundle_option[5]" change-container-classname"="" bundle-option-select="" required-entry="" required="">
<option value="">Choose a selection...</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
<option value="Pink">Pink</option>
<option value="Purple">Purple</option>
<option value="Red">Red</option>
<option value="Teal">Teal</option>
<option value="White">White</option>
</select>
<select id="bundle-option-5-size" name="bundle_option[5]" change-container-classname"="" bundle-option-select="" required-entry="" required="">
<option value="">Choose a selection...</option>
<option value="Child">Child</option>
<option value="Youth">Youth</option>
<option value="Adult Small">Adult Small</option>
<option value="Adult Medium">Adult Medium</option>
<option value="Adult Large">Adult Large</option>
<option value="Adult X-Large">Adult X-Large</option>
<option value="Adult XX-Large">Adult XX-Large</option>
</select>
<input id="bundle_option[5]" type="hidden" value="" name="bundle_option[5]">

Related

deactivate element (css) based on a JavaScript trigger

Based on the given selection i want to deaktivate the element(opt_hello_message_embed_color_title). Incase of the value NO the element should not be active. How can i realise that in javascript?
<select id="opt_hello_message_embed" name="opt_embed">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<label for="embed_color_title">Embed color (if active)</label>
<select id="opt_hello_message_embed_color_title" name="opt_embed_color_title">
<option value="purple">Purple</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="black">Black</option>
</select>
Just set the disabled property true to deactivate element
const select = document.querySelector("#opt_hello_message_embed_color_title");
select.disabled = true;
<select id="opt_hello_message_embed" name="opt_embed">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<label for="embed_color_title">Embed color (if active)</label>
<select id="opt_hello_message_embed_color_title" name="opt_embed_color_title">
<option value="purple">Purple</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="black">Black</option>
</select>
Just a addon to Ahsan's answer.
If you want the button dropdown to disappear use this:-
const select = document.querySelector("#opt_hello_message_embed_color_title");
select.style.display= "none";// to make the dropdown reappear use select.style.display= "block";
<select id="opt_hello_message_embed" name="opt_embed">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<label for="embed_color_title">Embed color (if active)</label>
<select id="opt_hello_message_embed_color_title" name="opt_embed_color_title">
<option value="purple">Purple</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="black">Black</option>
</select>

Alert if selected option are already selected in other select option

I need to alert if option is selected in other select option value. i disabled the option if selected but it can not insert into database because of disabled attribute. so i only want to alert.
<select class="input_slip_no form-control" name="slip_no[]" id="ID_2_slip_no" required="required">
<option value="SYS0001">SYS0001</option>
<option value="SYS0002">SYS0002</option>
<option value="SYS0003">SYS0003</option>
<option value="SYS0004">SYS0004</option>
<option value="SYS0005">SYS0005</option>
<option value="SYS0006">SYS0006</option>
<option value="SYS0007">SYS0007</option>
<option value="SYS0008">SYS0008</option>
<option value="SYS0009">SYS0009</option>
</select>
<select class="input_slip_no form-control" name="slip_no[]" id="ID_3_slip_no" required="required">
<option value="SYS0001">SYS0001</option>
<option value="SYS0002">SYS0002</option>
<option value="SYS0003">SYS0003</option>
<option value="SYS0004">SYS0004</option>
<option value="SYS0005">SYS0005</option>
<option value="SYS0006">SYS0006</option>
<option value="SYS0007">SYS0007</option>
<option value="SYS0008">SYS0008</option>
<option value="SYS0009">SYS0009</option>
</select>
<select class="input_slip_no form-control" name="slip_no[]" id="ID_4_slip_no" required="required">
<option value="SYS0001">SYS0001</option>
<option value="SYS0002">SYS0002</option>
<option value="SYS0003">SYS0003</option>
<option value="SYS0004">SYS0004</option>
<option value="SYS0005">SYS0005</option>
<option value="SYS0006">SYS0006</option>
<option value="SYS0007">SYS0007</option>
<option value="SYS0008">SYS0008</option>
<option value="SYS0009">SYS0009</option>
</select>
<select class="input_slip_no form-control" name="slip_no[]" id="ID_5_slip_no" required="required">
<option value="SYS0001">SYS0001</option>
<option value="SYS0002">SYS0002</option>
<option value="SYS0003">SYS0003</option>
<option value="SYS0004">SYS0004</option>
<option value="SYS0005">SYS0005</option>
<option value="SYS0006">SYS0006</option>
<option value="SYS0007">SYS0007</option>
<option value="SYS0008">SYS0008</option>
<option value="SYS0009">SYS0009</option>
</select>
This change function disabled the option if other select option is selected. When I change to alert it not working. How to only alert if selected in other select option.
$('.input_slip_no').on('change', function() {
var selected_options = $('.input_slip_no').map(function(){
return this.value
}).get();
$('.input_slip_no option').each(function(index) {
$(this).prop('disabled', $.inArray($(this).val(), selected_options) != -1);
});
});
Here you go with the jQuery selector as below,
Note: I have added empty element as initial selected value since the same value has been selected in your sample above.
$('.input_slip_no').change(function(){
var selected = $(this).val();
if(selected) {
var otherSelected = $('.input_slip_no').not($(this)).find('option[value="' + selected + '"]:selected');
if(otherSelected.length > 0) {
alert('Option is already selected');
$(this).val('');
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="input_slip_no form-control" name="slip_no[]" id="ID_2_slip_no" required="required">
<option value=""></option>
<option value="SYS0001">SYS0001</option>
<option value="SYS0002">SYS0002</option>
<option value="SYS0003">SYS0003</option>
<option value="SYS0004">SYS0004</option>
<option value="SYS0005">SYS0005</option>
<option value="SYS0006">SYS0006</option>
<option value="SYS0007">SYS0007</option>
<option value="SYS0008">SYS0008</option>
<option value="SYS0009">SYS0009</option>
</select>
<select class="input_slip_no form-control" name="slip_no[]" id="ID_3_slip_no" required="required">
<option value=""></option>
<option value="SYS0001">SYS0001</option>
<option value="SYS0002">SYS0002</option>
<option value="SYS0003">SYS0003</option>
<option value="SYS0004">SYS0004</option>
<option value="SYS0005">SYS0005</option>
<option value="SYS0006">SYS0006</option>
<option value="SYS0007">SYS0007</option>
<option value="SYS0008">SYS0008</option>
<option value="SYS0009">SYS0009</option>
</select>
<select class="input_slip_no form-control" name="slip_no[]" id="ID_4_slip_no" required="required">
<option value=""></option>
<option value="SYS0001">SYS0001</option>
<option value="SYS0002">SYS0002</option>
<option value="SYS0003">SYS0003</option>
<option value="SYS0004">SYS0004</option>
<option value="SYS0005">SYS0005</option>
<option value="SYS0006">SYS0006</option>
<option value="SYS0007">SYS0007</option>
<option value="SYS0008">SYS0008</option>
<option value="SYS0009">SYS0009</option>
</select>
<select class="input_slip_no form-control" name="slip_no[]" id="ID_5_slip_no" required="required">
<option value=""></option>
<option value="SYS0001">SYS0001</option>
<option value="SYS0002">SYS0002</option>
<option value="SYS0003">SYS0003</option>
<option value="SYS0004">SYS0004</option>
<option value="SYS0005">SYS0005</option>
<option value="SYS0006">SYS0006</option>
<option value="SYS0007">SYS0007</option>
<option value="SYS0008">SYS0008</option>
<option value="SYS0009">SYS0009</option>
</select>
Please have a look at this link:
$('.ddControl').change(function(){
for(var i=0;i<$('.ddControl').length;i++){
debugger;
if($(this).attr('id') != $($('.ddControl')[i]).attr('id'))
{
if($(this).val() == $($('.ddControl')[i]).val())
{
alert('Option is already selected');
}
}
}
})
Demo

change select option by javascript

i have problem in javascript
i make carwebsite
i need to achieve functionality as per the image
when I choose company in "make" select box,
it shows me all classes. Then I need to choose a "class" from second dropdown and it should show me all Models
now i get one code
<script type="text/javascript">
$(document).ready(function(){
$('.car').change(function()
{ getcar = $(this).val();
//console.log(getcar);
$('.subcar').hide();
$('.'+getcar).show();
}); });
// end DOM
</script>
this is select (make)
<select name="car" class="car">
<option value="0" SELECTED="SELECTED">--Choose--</option>
<option value="Acura">Acura</option>
<option value="Alfa_Romeo">Alfa Romeo</option>
<option value="Aston_Martin">Aston Martin</option>
<option value="Audi">Audi</option>
<option value="Bentley">Bentley</option>
<option value="BMW">BMW</option>
<option value="Buick">Buick</option>
<option value="Cadillac">Cadillac</option>
<option value="Can_Am">Can Am</option>
<option value="Chery">Chery</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Chrysler">Chrysler</option>
<option value="Citroen">Citroen</option>
<option value="Daihatsu">Daihatsu</option>
<option value="Dodge">Dodge</option>
<option value="Ducati">Ducati</option>
<option value="Ferrari">Ferrari</option>
<option value="Fiat">Fiat</option>
<option value="Ford">Ford</option>
<option value="GMC">GMC</option>
</select>
this is select (class)
<select name="branch_name" class="subcar Acura" style="display:none;">
<option value="0" SELECTED="SELECTED" DISABLED="DISABLED">- None -</option>
<option value="CL">CL</option>
<option value="CSX">CSX</option>
<option value="EL">EL</option>
<option value="ILX">ILX</option>
<option value="ZDX">ZDX</option></select>
<select name="branch_name" class="subcar Alfa_Romeo" style="display:none;">
<option value="0" SELECTED="SELECTED" DISABLED="DISABLED">- None -</option>
<option value="101">101</option>
<option value="156">156</option>
<option value="156CROSSWAGON">156CROSSWAGON</option>
<option value="Spider">Spider</option>
</select>
<select name="branch_name" class="subcar Aston_Martin" style="display:none;">
<option value="0" SELECTED="SELECTED" DISABLED="DISABLED">- None -</option>
<option value="DB9">DB9</option>
<option value="Healey">Healey</option>
<option value="Vantage">Vantage</option>
</select>
how can i make third select
???

Get or Set Value(s) on A Multi-select Form Field

When you have a multi-select form field such as the following, how do you get, and set the selected option values?
<select class="items" multiple="multiple" size="5">
<option value="apple">apple</option>
<option value="ant">ant</option>
<option value="ape">ape</option>
<option value="age">age</option>
<option value="boy">boy</option>
<option value="banana">banana</option>
<option value="carrot">carrot</option>
</select>
Getting the value(s)
var items = [];
$('select.items option:selected').each(function() {
items.push( this.value );
});
Is this the only way to get the array of values or is there a sleeker way?
Setting the value(s)
var items = ['apple', 'ape', 'carrot'];
$.each(items, function() {
$('select.items option[value="' + this + '"]').prop('selected', true);
});
Is there a sleeker way to do this?
It's quite straight-forward to get the selected values array; use the jQuery .val() method.
var items = $('select.items').val();
//sample result: ["apple","ape","boy","daisy","eagle"]
Please note that JavaScripts value property, which works well for other form fields, returns just the first selected value
function out( v ) {
$('pre.out').text( JSON.stringify( v ) );
}
$('select.items').on('change', function() {
out( $(this).val() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="items" multiple="multiple" size="5">
<option value="apple">apple</option>
<option value="ant">ant</option>
<option value="ape">ape</option>
<option value="age">age</option>
<option value="boy">boy</option>
<option value="banana">banana</option>
<option value="carrot">carrot</option>
<option value="cat">cat</option>
<option value="daisy">daisy</option>
<option value="desk">desk</option>
<option value="elephant">elephant</option>
<option value="eagle">eagle</option>
<option value="fox">fox</option>
<option value="fat">fat</option>
<option value="goat">goat</option>
<option value="good">good</option>
<option value="gum">gum</option>
<option value="hut">hut</option>
<option value="hop">hop</option>
<option value="insect">insect</option>
<option value="ice">ice</option>
<option value="jump">jump</option>
<option value="kite">kite</option>
<option value="lamp">lamp</option>
<option value="lap">lap</option>
<option value="monkey">monkey</option>
<option value="mat">mat</option>
<option value="nature">nature</option>
<option value="nose">nose</option>
<option value="owl">owl</option>
<option value="pocket">pocket</option>
<option value="pick">pick</option>
<option value="quote">quote</option>
<option value="rabbit">rabbit</option>
<option value="run">run</option>
<option value="soft">soft</option>
<option value="sit">sit</option>
<option value="table">table</option>
<option value="toy">toy</option>
<option value="understand">understand</option>
<option value="vote">vote</option>
<option value="winter">winter</option>
<option value="xmas">xmas</option>
<option value="yes">yes</option>
<option value="zoo">zoo</option>
</select>
<pre class="out"></pre>
To set the selected values also requires no looping. Use the same jQuery .val() method.
$('select.items').val( ['apple','ape','boy','age','eagle'] );
$('button.set').on('click', function() {
$('select.items').val( ['apple','ape','boy','age','eagle'] );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="items" multiple="multiple" size="5">
<option value="apple">apple</option>
<option value="ant">ant</option>
<option value="ape">ape</option>
<option value="age">age</option>
<option value="boy">boy</option>
<option value="banana">banana</option>
<option value="carrot">carrot</option>
<option value="cat">cat</option>
<option value="daisy">daisy</option>
<option value="desk">desk</option>
<option value="elephant">elephant</option>
<option value="eagle">eagle</option>
<option value="fox">fox</option>
<option value="fat">fat</option>
<option value="goat">goat</option>
<option value="good">good</option>
<option value="gum">gum</option>
<option value="hut">hut</option>
<option value="hop">hop</option>
<option value="insect">insect</option>
<option value="ice">ice</option>
<option value="jump">jump</option>
<option value="kite">kite</option>
<option value="lamp">lamp</option>
<option value="lap">lap</option>
<option value="monkey">monkey</option>
<option value="mat">mat</option>
<option value="nature">nature</option>
<option value="nose">nose</option>
<option value="owl">owl</option>
<option value="pocket">pocket</option>
<option value="pick">pick</option>
<option value="quote">quote</option>
<option value="rabbit">rabbit</option>
<option value="run">run</option>
<option value="soft">soft</option>
<option value="sit">sit</option>
<option value="table">table</option>
<option value="toy">toy</option>
<option value="understand">understand</option>
<option value="vote">vote</option>
<option value="winter">winter</option>
<option value="xmas">xmas</option>
<option value="yes">yes</option>
<option value="zoo">zoo</option>
</select>
<button class="set">SET</button>

Change text align of div from dropdown selection?

I have a few dropdown list to style the font of a div. However i cant seem to get the align to work. Please help!!
I have always found my answers on google and not had such a tough time getting round things. The align is really bugging me, that i cant find a solution.
<SCRIPT LANGUAGE="JavaScript">
function fontSize(size){
document.getElementById("lineOne").style.fontSize = size
}
function fontFamily(family) {
document.getElementById("lineOne").style.fontFamily = family
}
function fontStyle(style) {
document.getElementById("lineOne").style.fontStyle = style
}
function fontWeight(weight) {
document.getElementById("lineOne").style.fontWeight = weight
}
function addContent(divName, content) {
document.getElementById(divName).innerHTML = content;
}
function setColor() {
var color = document.getElementById("color").value;
document.getElementById("myDiv").style.color = color;
}
function alignl(ele){
document.getElementById("lineOne").style.align = ele
}
</SCRIPT>
And the body is aa such:
<body>
Size:
<select name=fontSizeChanger onchange="fontSize(this.value)">
<option value="6">6</option>
<option value="8">8</option>
<option value="10">10</option>
<option value="12" selected="selected">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
</select>
Colour:
<select id="color" onclick="setColor();">
<option value="white">white</option>
<optionvalue="black"selected="selected">black</option>
<option value="red">red</option>
<option value="lightblue">light blue</option>
<option value="darkblue">dark blue</option>
<option value="lightgreen">light green</option>
<option value="darkgreen">dark green</option>
<option value="yellow">yellow</option>
<option value="orange">orange</option>
<option value="pink">pink</option>
<option value="purple">purple</option>
<option value="gray">gray</option>
</select>
Family:
<select id="fontFamilyChanger" onchange="fontFamily(this.value)">
<option value="sans-serif" selected="selected">Sans Serif</option>
<option value="Impact">Impact</option>
<option value="times new roman">Times New Roman</option>
</select>
Style:
<select id="fontStyleChanger" onchange="fontStyle(this.value)">
<option value="normal" selected="selected">Normal</option>
<option value="italic">Italic</option>
<option value="oblique">Oblique</option>
</select>
Weight:
<select id="fontWeightChanger" onchange="fontWeight(this.value)">
<option value="normal" selected="selected">Normal</option>
<option value="bold">Bold</option>
</select>
Align:
<select id='s' name='s' onchange="alignl(this.value);">
<option value="left">left</option>
<option value="right">right</option>
<option value="center">center</option>
<option value="top">top</option>
</select>
<form name="myForm">
<input name="myContent"></input>
<input type="button" value="Add content" onClick="addContent('lineOne', document.myForm.myContent.value); setCookie('content', document.myForm.myContent.value, 7);">
</form>
<div id="myDiv">
<div id="lineOne"></div>
</div>
</body>
You can set the align in the same way you set the other styling properties, but the variable is named textAlign, not align.
function alignl(style) {
document.getElementById("lineOne").style.textAlign = style;
}

Categories