We Keep Coding

javascript code that is used to show a div modified to work with multiple unique divs

I've got a <select> form field, and onchange it runs a javascript function. If the function matches something specific, it shows new form field options located inside of a <div style="display: none;">
I've got a unique situation where I need to use this same code across multiple select boxes; however, each one has a specific name. They are not all the same and need to work independantly. Each one has a unique ID #.
I only want the second select field to show up if "ship with" is selected in the first field.
First, here is the code for the select field
<select name="first_select_option" onchange="ShowDiv(this);">
<option value="">Select Option</option>
<option value="SHIP WITH" id="SHIPWITH_<?php echo $data_order_id; ?>_Show">SHIP WITH</option>';
</select>
Here is the code for the hidden select field. There are multiple of these called dynamically on the page during a php while loop. That is why I am using the <?php echo $data_order_id; ?> inside the id of each one.
<div id="SHIPWITH_<?php echo $data_order_id;?>" style="display: none;">
<select name="secondhiddenselect">
<option value="">SELECT OPTIONS BELOW</option>
</select>
</div>
As you notice I am using a php variable inside the id. That is a unique id assigned to that specific select field inside a while loop. So the more while loops, the more select fields are pupulated, therefore, there end up being a bunch of select fields each with a unique ID all because of the $data_order_id
I need to modify the following script to not only work with a single SHIPWITH, but work with each individual SHIP WITH_{id}
<script type="text/javascript">
function ShowDiv(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
OptionValue = document.getElementById("NEWCC_Show").value;
if(OptionValue == nameSelect.value){
document.getElementById("NEWCC").style.display = "block";
}
else{
document.getElementById("NEWCC").style.display = "none";
}
}
else{
document.getElementById("NEWCC").style.display = "none";
}
}
</script>
I attempted to modify this and make it work by using .split('_') to break the variable up but its not working. I am not as good with JavaScript as I'd like to be. Here is my attempt...
<script type="text/javascript">
function ShowDiv(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
var name = nameSelect;
var splitName = name.split('_');
alert(splitName[1]);
OptionValue = document.getElementById(splitName[0] + splitName[1] + splitName[2]).value;
if(OptionValue == nameSelect.value){
document.getElementById(splitName[0] + splitName[1]).style.display = "block";
}
else{
document.getElementById(splitName[0] + splitName[1]).style.display = "none";
}
}
else{
document.getElementById(splitName[0] + splitName[1]).style.display = "none";
}
}
</script>
So even though there are multiple select fields, the JavaScript ONLY communicates with the specific one that corresponds with the $data_order_id.
Here is an updated snippet to help diagnose problem
function ShowDiv(nameSelect) {
console.log(nameSelect);
if (nameSelect) {
var name = nameSelect;
var splitName = name.split('_');
alert(splitName[1]);
OptionValue = document.getElementById(splitName[0] + splitName[1] + splitName[2]).value;
if (OptionValue == nameSelect.value) {
document.getElementById(splitName[0] + splitName[1]).style.display = "block";
} else {
document.getElementById(splitName[0] + splitName[1]).style.display = "none";
}
} else {
document.getElementById(splitName[0] + splitName[1]).style.display = "none";
}
}
<select name="number_of_skids" onchange="ShowDiv(this);">
<option value="SHIP WITH" id="SHIPWITH_11_Show">SHIP WITH</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
<div id="SHIPWITH_11" style="display: none;">
<select name="ship_with_product">
<option value="">SELECT PRODUCT</option>
<option value="4">1234</option>
</select>
</div>
<select name="number_of_skids" onchange="ShowDiv(this);">
<option value="SHIP WITH" id="SHIPWITH_21_Show">SHIP WITH</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
<div id="SHIPWITH_21" style="display: none;">
<select name="ship_with_product">
<option value="">SELECT PRODUCT</option>
<option value="4">1234</option>
</select>
</div>
<select name="number_of_skids" onchange="ShowDiv(this);">
<option value="SHIP WITH" id="SHIPWITH_33_Show">SHIP WITH</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
<div id="SHIPWITH_33" style="display: none;">
<select name="ship_with_product">
<option value="">SELECT PRODUCT</option>
<option value="4">1234</option>
</select>
</div>

As mentioned in the comments, it looks like you want to get the id of the selected option, not the select. One way of getting that is to use the selectedIndex property of the select in combination with its options collection (you could also use selectedOptions[0], among other techniques).
I've taken the liberty of "correcting" some naming conventions; generally, initial uppercase letters denote an object's constructor, not a plain function or variable. Also, using var (or let or const, depending on the need) before a variable assignment keeps it from becoming a global variable by default. There were a few other minor corrections made I'll leave to you to discover.
function showDiv(nameSelect) {
console.log(nameSelect);
if (nameSelect) {
var selectedOption = nameSelect.options[nameSelect.selectedIndex];
var name = selectedOption.id;
var splitName = name.split('_');
console.log(splitName[1]);
var idOfSection = splitName[0] + '_' + splitName[1];
var optionValue = selectedOption.value;
if (optionValue == nameSelect.value) {
document.getElementById(idOfSection).style.display = "block";
} else {
document.getElementById(idOfSection).style.display = "none";
}
} else {
// Commenting this out, since splitName will be undefined in this branch...
//document.getElementById(splitName[0] + splitName[1]).style.display = "none";
}
}
<select name="number_of_skids" onchange="showDiv(this);">
<option value="SHIP WITH" id="SHIPWITH_11_Show">SHIP WITH</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
<div id="SHIPWITH_11" style="display: none;">
<select name="ship_with_product">
<option value="">SELECT PRODUCT</option>
<option value="4">1234</option>
</select>
</div>
<select name="number_of_skids" onchange="showDiv(this);">
<option value="SHIP WITH" id="SHIPWITH_21_Show">SHIP WITH</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
<div id="SHIPWITH_21" style="display: none;">
<select name="ship_with_product">
<option value="">SELECT PRODUCT</option>
<option value="4">1234</option>
</select>
</div>
<select name="number_of_skids" onchange="showDiv(this);">
<option value="SHIP WITH" id="SHIPWITH_33_Show">SHIP WITH</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
<div id="SHIPWITH_33" style="display: none;">
<select name="ship_with_product">
<option value="">SELECT PRODUCT</option>
<option value="4">1234</option>
</select>
</div>

Javascript auto select from dropdown

I'm searching and searching and can not find anything exactly what I need.
So I need javascript, that will select option from dropdown, but not by the option value number, but name.
I have:
<select class="aa" id="local" name="local">
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>
So I need to select • Jawor by name, not by id - it's the most important. How do I make it work?

For you is it like;
var options = document.getElementsByClassName("aa")[0].options,
name ="Jawor";
for(i = 0; i < options.length; i++){
if(options[i].text.indexOf(name) > -1){
options[i].selected = true;
break;
}
}
<select class="aa" id="local" name="local">
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>
</select>

U need to Use onChange Event Handler ... for example
<select onchange="showSelected()">
Then write your script ...
<script>
function showSelected(){
var s=document.getElementById('local'); //refers to that select with all options
var selectText=s.options[s.selectedIndex].text // takes the one which the user will select
alert(selectText) //Showing the text selected ...
}
</script>
Rest of your code is okay !
<select class="aa" id="local" name="local" onchange='showSelected'()>
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>
</select>

Using jquery here. You can use the following function:
function selectFromDropdown(selector, text) {
$(selector).find('option').each(function() {
if ($(this).text() == text) {
$(selector).val($(this).val());
}
})
}
A demo:
function selectFromDropdown(selector, text) {
$(selector).find('option').each(function() {
if ($(this).text() == text) {
$(selector).val($(this).val());
return false;
}
})
}
//use the function
setTimeout(function() {
selectFromDropdown('#local', '• Dzierżoniów')
}, 1000)
setTimeout(function() {
selectFromDropdown('#local', '• Jawor')
}, 4000)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="aa" id="local" name="local">
<option value="">Select</option>
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>
</select>

for chrome console use this
document.getElementById("id").selectedIndex = '3'; or
document.getElementById('id').value = 'BA';

Dynamic Select Choice using jquery

I have two choice boxes as follows,
<select name="first" id="first">
<option value="0">First</option>
<option value="1">Second</option>
<option value="2">Third</option>
<option value="3">Fourth</option>
<option value="4">Five</option>
<option value="5">Six</option>
<option value="6">Seven</option>
</select>
Second Select box :
<select name="first" id="first">
<option value="0">First</option>
<option value="1">Second</option>
<option value="2">Third</option>
<option value="3">Fourth</option>
<option value="4">Five</option>
<option value="5">Six</option>
<option value="6">Seven</option>
</select>
Now when I select "First" in first select box at that time I should not able to select First choice in second select box. If I select second in first choice then I should not able to select 1st and second from second list box, if third then I should not able to select first, second and third. So on.. How can I do it ?
Thanks!

So first give a different name and id to the second select (second for example) and try this JS:
$('#first').change(function() {
var value = $(this).val();
$('#second').children('option').each(function() {
if ( $(this).val() <= value ) {
$(this).attr('disabled',true);
} else {
$(this).attr('disabled',false)
}
});
$('#second').val(parseInt(value)+1);
});
http://jsfiddle.net/charlesrv/av97qfqc/2/

I did it without jQuery:
HTML:
<select name="first" id="first" onchange="changed()">
<option value="0">First</option>
<option value="1">Second</option>
<option value="2">Third</option>
<option value="3">Fourth</option>
<option value="4">Five</option>
<option value="5">Six</option>
<option value="6">Seven</option>
</select>
<select name="second" id="second">
<option value="0">First</option>
<option value="1">Second</option>
<option value="2">Third</option>
<option value="3">Fourth</option>
<option value="4">Five</option>
<option value="5">Six</option>
<option value="6">Seven</option>
</select>
JS:
function changed() {
var selected = document.getElementById("first").selectedIndex;
for( var i=0; i<=document.getElementById("second").options.length; i++ ) {
document.getElementById( "second" ).options[i].disabled = false;
}
for( var i=0; i<=selected; i++ ) {
document.getElementById( "second" ).options[i].disabled = true;
}
}

Change id of second select. Try this Fiddle
The value in second select should change with value select in first box:
$("#first").on("change",function(){
var selected = $(this).val();
$('#second').children('option').each(function() {
if ( $(this).val() <= selected ) {
$(this).attr('disabled',true);
} else {
$(this).attr('disabled',false)
}
});
$('#second').val(parseInt(selected)+1) //To change value in second select
})

$('#first').change(function() {
var v = $(this).find("option:selected").index();
$('select[id!="first"] option').each(function() {
if ( $(this).index() <= v ) {
$(this).attr('disabled',true);
} else {
$(this).attr('disabled',false)
}
});
});
Try this code,this does not need to you to add any new ID or names.

how to make select box dynamic

I've three select-box here to choose Format, Amount & Shipping type. After selection, it will calculate price automatically.
here, how those select-box look like:
<p>Format: <select class="calculate" name="format">
<option value="0">Please Select</option>
<option value="0">Format 1</option>
<option value="0">Format 2</option>
</select></p>
<p>Amount: <select class="calculate" name="amount">
<option value="0">Select amount</option>
<option value="247">250pcs</option>
<option value="279">1,000pcs</option>
<option value="389">2,500pcs</option>
</select></p>
<p>Shipping type: <select id="surcharge" name="shipping">
<option value="0">Select Shipping</option>
<option value="10%">Standard</option>
<option value="15%">Express</option>
</select></p>
currently, the Amount for the both Format (Format 1/Format 2) are same.
what i'm trying to do is like: for the Format 1, the current Amount will remain same, but if user select Format 2 then the Amount will something like this:
<option value="0">Select amount</option>
<option value="300">250pcs</option>
<option value="350">1,000pcs</option>
<option value="400">2,500pcs</option>
where the value is different! how can i achive this?
here goes the JSfiddle
Thanks in advance for any help!

You should first set the new values in an array. So you can loop through them while changing the first select.
Then you can easily get the options from the 2nd select, and update them with the correct new values:
$(".calculate, #surcharge").on("change", function(){
if($(this).val() == 1)
{
var amountValues = new Array(0,250,400,500);
$("#menge option").each(function(key,value)
{
$(this).val(amountValues[key]);
});
} else if($(this).val() == 2)
{
var amount Values = new Array();
// .....
}
});
http://jsfiddle.net/7Bfk5/15/

You can do this by checking the text() in the options you are selecting
if ($('#sel option:selected').text() === 'Format 2') {
$('#amt option').each(function () {
alert($(this).text());
if ($(this).text() == "250pcs") $(this).val("300");
else if ($(this).text() == "1,000pcs") $(this).val("350");
else $(this).val("400");
});
}
working fiddle

You can create a function that does values/options replacement and call it on your select changes.
I did an example for you but used static html options to replace old ones, this might not be the best way but tried to keep it as simple as possible.
HTML
<p>Format: <select class="calculate format" name="format">
<option value="0">Please Select</option>
<option value="1">Format 1</option>
<option value="2">Format 2</option>
</select></p>
<p>Amount: <select class="calculate amount" name="menge">
<option value="0">Select Menge</option>
<option value="247">250pcs</option>
<option value="279">1,000pcs</option>
<option value="389">2,500pcs</option>
</select></p>
<p>Shipping type: <select id="surcharge" name="shipping">
<option value="0">Select Shipping</option>
<option value="10%">Standard</option>
<option value="15%">Express</option>
</select></p>
<p>Price: <span id="total">0 €</span></p>
Javascript
var updateValues = function (){
if($('.format').val() == 1) {
html = '<option value="300">300pcs</option>';
html += '<option value="400">400pcs</option>';
html += '<option value="500">500pcs</option>';
$('.amount').html(html);
} else if( $('.format').val() == 2) {
html = '<option value="600">600pcs</option>';
html += '<option value="900">900pcs</option>';
html += '<option value="1200">1200pcs</option>';
$('.amount').html(html);
}
};
$('.format').change(function(){updateValues()});
$(".calculate, #surcharge").on("change", function(){
var total = 0;
$('.calculate').each(function() {
if($(this).val() != 0) {
total += parseFloat($(this).val());
}
});
if($('#surcharge').val() != 0) {
total = total * ((100 + parseFloat($('#surcharge').val())) / 100);
}
$('#total').text(total.toFixed(2) + ' €');
});
Fiddle link
http://jsfiddle.net/7Bfk5/23/

Add data into a Select

I have this select; to select countries and add to a new select multiple with a limit of 5 countries, but I just want to add 1 country by select or more countries if i do a multiple select.
My mistake is in my function addC(), when I want to add more than 1 country in my select, it add the several countries in 1 option tag like this:
<option>South KoreaUSAJapan</option>
What I can modify to display the following way if i do a multiple select?:
<option>South Korea</option>
<option>USA</option>
<option>Japan</option>
My code:http://jsbin.com/osesem/4/edit
function addC() {
if ($("#agregarProvincia option").length < 5) {
var newC = ($("#countries option:selected").text());
$("#addCountry").append("<option>" + newC + "</option>");
}
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<label for="provincia2"><b>¿Country?</b></label><br>
<span>
<select multiple="multiple" size="5" id="countries">
<option value="1">South Korea</option>
<option value="2">USA</option>
<option value="2">Japan</option>
<option value="3">Italy</option>
<option value="4">Spain</option>
<option value="5">Mexico</option>
<option value="6">England</option>
<option value="7">Phillipins</option>
<option value="8">Portugal</option>
<option value="9">France</option>
<option value="10">Germany</option>
<option value="11">Hong Kong</option>
<option value="12">New Zeland</option>
<option value="13">Ireland</option>
<option value="14">Panama</option>
<option value="15">Norwey</option>
<option value="16">Sweeden</option>
<option value="17">India</option>
<option value="18">Morroco</option>
<option value="19">Russia</option>
<option value="20">China</option>
</select>
</span>
<div class="addremover">
<input class="add" type="button" onclick="addC()" value="Addd »" />
<br/>
</div>
<span>
<select id="addCountry" multiple="multiple" size="5">
</select>
</span>

use each function to loop through the text and append it..
try this
function addC() {
if ($("#agregarProvincia option").length < 5) {
var newC = ($("#countries option:selected"));
newC.each(function(){
$("#addCountry").append("<option>" + $(this).text() + "</option>");
})
}
}
JSbin here

Or just clone the selected <option>'s
function addC() {
if ($('#countries option:selected').size() < 5)
{
$('#addCountry').append($('#countries option:selected').clone());
}
else
{
alert('you can only select 5');
}
}