Develop Reference

Make 2 <select> statements work and dont crash the script

Im putting multiples select in my code that are hidden and got a principal select that makes visible the other selec depending in the value selected, but when you choose a value in the second select it changes the second visible select to another, how can I prevent that to happen
Its a catalog in a static html that interacts with a SQL Server via php, so I need the select to compare it with the ID´s and make inserts and updates
This is the script:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".box").hide();
}
});
}).change();
});
function myFuction(){
//Getting Value
//var selValue = document.getElementById("singleSelectDD").value;
var selObj = document.getElementById("MENU");
var selValue = selObj.options[selObj.selectedIndex].value;
//Setting Value
document.getElementById("valorsel").value = selValue;
}
</script>
And this are the examples:
<select name="MENU" id="MENU" onchange="myFuction()">
<option value="" selected></option>
<option value="1">Area</option>
<option value="2">Bancos</option>
<option value="3">CFDI</option>
<option value="4">Departamentos</option>
<option value="5">Empresa</option>
<option value="6">Giro Comercial</option>
<option value="7">Negocio</option>
</select><br><br>
<p>Texto Global</p>
<input type="text" name="GLOBAL" id="GLOBAL" value="" placeholder="Texto global">
</div>
<div class="1 box">
<p>Seleccione el Area deseada</p>
<input type="text" name="Txt_Area" id="Txt_Area" value="" placeholder="AREA">
<select name="AREA" id="AREA" placeholder="Seleccione Area deseada>
<option value="" selected></option>
<option value="1">AREA 1</option>
<option value="2">AREA 2</option>
<option value="3">AREA 3</option>
</select>
I want to be able of having both select on screen to insert or update the information

Instead of having $("select").change(function(){, it's better that you have $("#MENU").change(function() { because otherwise it will detect all the select menus that are changing instead of just the first one like you want.
$(document).ready(function() {
$("#MENU").change(function() {
$(this).find("option:selected").each(function() {
var optionValue = $(this).attr("value");
if (optionValue) {
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else {
$(".box").hide();
}
});
}).change();
});
function myFuction() {
var selObj = document.getElementById("MENU");
var selValue = selObj.options[selObj.selectedIndex].value;
//Setting Value
//document.getElementById("valorsel").value = selValue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<select name="MENU" id="MENU" onchange="myFuction()">
<option value="" selected></option>
<option value="1">Area</option>
<option value="2">Bancos</option>
<option value="3">CFDI</option>
<option value="4">Departamentos</option>
<option value="5">Empresa</option>
<option value="6">Giro Comercial</option>
<option value="7">Negocio</option>
</select><br><br>
<p>Texto Global</p>
<input type="text" name="GLOBAL" id="GLOBAL" value="" placeholder="Texto global">
</div>
<div class="1 box">
<p>Seleccione el Area deseada</p>
<input type="text" name="Txt_Area" id="Txt_Area" value="" placeholder="AREA">
<select name="AREA" id="AREA" placeholder="Seleccione Area deseada">
<option value=" " selected></option>
<option value="1 ">AREA 1</option>
<option value="2 ">AREA 2</option>
<option value="3 ">AREA 3</option>
</select>

How to get multiple values from an HTML <select> element

How to take the values of value1 and value2 in two variables using javascript?
<select class="form-control" id="country" name="country">
<option value="**value1**" "**value2**" >Select Item</option>
</select>

You could make your own attribute. I know you probably do not want to get the element with an ID, but I don't know the context. You can just call getAttribute on the option and use any name you gave to the "custom" attribute.
window.addEventListener('load', ()=>
{
const option = document.getElementById('option');
function init()
{
//Use this to get the values
console.log(option.getAttribute('other-value'));
}
init();
});
<select class="form-control" id="country" name="country">
<option id="option" value="value1" other-value="value2">Select Item</option>
</select>

I don't know what you really want to do with your piece of code,
but here is a proper way to use the option elements, and a way to split multiple values with a fixed separator:
var example = document.getElementById('example');
example.addEventListener('change', function() {
// Console displays the “value”, and not the text, of the selected option
console.log("option value:", example.value);
});
// Here is what I'll do with your "multiple" values
var country = document.getElementById('country');
var options = country.querySelector('option');
var values = options.value.split("/");
values.forEach(function(val) {
country.innerHTML += "<option value=" + val + ">" + val + "</option>";
});
<p>My simple example</p>
<select id="example" name="country">
<option value="--">Select Country</option>
<option value="GB">Great Britain</option>
<option value="FR">France</option>
</select>
<br>
<br>
<p>Example with option getting splitted</p>
<select class="form-control" id="country" name="country">
<!-- Let's say your multiple values are separated by a "/" -->
<option value="**value1**/**value2**">Select Item</option>
</select>
Hope it helps.

$('select').on('change', function() {
console.log( $('#country').val() );
console.log($(this).find(':selected').data('second'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="country" name="country">
<option value="value1" data-second ="value2" >Select Item 1</option>
<option value="value3" data-second ="value4" >Select Item 2</option>
</select>

how can i store two info on a single select and call them in separate textbox HTML/JS

<span id="s_home_country">
<select name="Home Country" id="home_country">
<option value="Select one" selected="selected">Select one</option>
<option value="h1">Home1</option>
<option value="h2">Home2</option>
<option value="h3">Home3</option>
<option value="h4">Home4</option>
</select>
</span>
and I have another data that i want to incorporate, when Home1 is selected, I want this to show 21-dec into another textbox automatically. and so on..
var Home_country = [
"21-Dec",
"01-Jan",
"01-Jan",
"01-Jan",
];

You could use an object and an event listener.
var home_country = {
"h1":"21-Dec",
"h2":"01-Jan",
"h3":"01-Jan",
"h4":"01-Jan",
};
var selectbox = document.getElementById('home_country');
var textbox = document.getElementById('home_country_date');
selectbox.addEventListener('change', function(e){
textbox.value = home_country[this.value]
})
<span id="s_home_country">
<select name="Home Country" id="home_country">
<option value="Select one" selected="selected">Select one</option>
<option value="h1">Home1</option>
<option value="h2">Home2</option>
<option value="h3">Home3</option>
<option value="h4">Home4</option>
</select>
</span>
<input type="text" id="home_country_date">

Please find below snippet just add another attribute data-attr1 and on change of select list find selected option and get its attribute with name data-attr1 and pass attribute's value to textbox
$("#home_country").on("change",function(){
$(".txtvalue").val($(this).find("option:selected").attr("data-attr1"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="s_home_country">
<select name="Home Country" id="home_country">
<option value="Select one" selected="selected">Select one</option>
<option data-attr1="21-Dec" value="h1">Home1</option>
<option data-attr1="01-Dec" value="h2">Home2</option>
<option data-attr1="02-Dec" value="h3">Home3</option>
<option data-attr1="03-Dec" value="h4">Home4</option>
</select>
</span>
<input type="text" class="txtvalue" />

Add an event listener to your select input which outputs the relevant value from your array when an option is selected:
var el = document.getElementById('home_country');
var textbox = document.getElementById('your_textbox_el');
el.addEventListener('change', function(e){
if (e.target.value == 'h1') {
textbox.value = Home_country[0];
} else if (e.target.value == 'some other condition') {
// do something else
}
}

Unless I'm misunderstanding you, you can just put the values of the Home_country array inside the value properties of the options like so:
<span id="s_home_country">
<select name="Home Country" id="home_country">
<option value="Select one" selected="selected">Select one</option>
<option value="21-Dec">Home1</option>
<option value="01-Jan">Home2</option>
<option value="01-Jan">Home3</option>
<option value="01-Jan">Home4</option>
</select>
</span>
Now, when you do get the value of your select element, it will be the value in the array that you gave.

Adding multiple select options with jquery

I've created functionality to move items from the left -> right, and vice versa. On top of that, I am added the option values of each item into a hidden input box, so I can later submit it to the server for processing. It seems that when I try to add more than one item at a time, only the first one is being added to the hidden input box though.
In the end, my hidden input field should look like: 3233,2332,3234,1212,112
Since I'll accept the parameters in the Ruby on Rails server side to parse and do whatever to (unless there's a better option).
Here's my current code:
$("#btnLeft").click(function(){
var selectedItem = $("#hosts_assigned option:selected");
$("#hosts_available").append(selectedItem);
$("#hosts").remove(selectedItem.val());
});
$("#btnRight").click(function(){
var selectedItem = $("#hosts_available option:selected");
$("#hosts_assigned").append(selectedItem);
var current_hosts = $("#hosts").val();
$("#hosts").val(current_hosts + "," + selectedItem.val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="hosts_available"size="30" multiple="multiple">
<option value="1222">1.1.2.2</option>
<option value="1232">1.1.2.2</option>
<option value="1242">1.1.2.2</option>
<option value="1252">1.1.2.2</option>
</select>
<select id="hosts_assigned" size="30" multiple="multiple">
<option value="1111">1.1.2.1</option>
</select>
</form>
<button type="button" id="btnRight">>></i></button>
<br/>
<button type="button" id="btnLeft"><<</i></button>
<br/><br/>
<input type="text" id="hosts" />

You are getting more than one.
You need to loop. you also need to loop after removing
function getHosts() {
var current_hosts=[];
$("#hosts_assigned option").each(function() {
current_hosts.push($(this).val());
});
return current_hosts.length>0?current_hosts.join(","):"";
}
$("#btnLeft").click(function() {
$("#hosts_assigned option:selected").each(function() {
$("#hosts_available").append(this);
})
$("#hosts").val(getHosts());
});
$("#btnRight").click(function() {
$("#hosts_available option:selected").each(function() {
$("#hosts_assigned").append(this);
});
$("#hosts").val(getHosts());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="hosts_available" size="30" multiple="multiple">
<option value="1222">1.1.2.2</option>
<option value="1232">1.1.2.2</option>
<option value="1242">1.1.2.2</option>
<option value="1252">1.1.2.2</option>
</select>
<select id="hosts_assigned" size="30" multiple="multiple">
<option value="1111">1.1.2.1</option>
</select>
</form>
<button type="button" id="btnRight">>></i>
</button>
<br/>
<button type="button" id="btnLeft"><<</i>
</button>
<br/>
<br/>
<input type="text" id="hosts" value="" />

Can't get jquery to set value of select input when value of first select changes

I'm trying to update the value of a select input when I change the value of another select input. I cannot get anything to happen on the page and want to make sure I don't have a syntax error or some other dumb thing in this code.
<div class="group">
<div class="inputs types">
<strong style="font-size:13px;">Category:</strong>
<select name="id" id="ctlJob">
<option value="1">Automotive</option>
<option value="2">Business 2 Business</option>
<option value="3">Computers</option>
<option value="4">Education</option>
<option value="5">Entertainment & The Arts</option>
<option value="6">Food & Dining</option>
<option value="7">Government & Community</option>
<option value="8">Health & Beauty</option>
<option value="9">Home & Garden</option>
<option value="10">Legal & Financial Services</option>
<option value="11">Professional Services</option>
<option value="12">Real Estate</option>
<option value="13">Recreation & Sports</option>
<option value="14">Retail Shopping</option>
<option value="15">Travel & Lodging</option>
</select>
<select name="type" id="ctlPerson"></select>
</div>
</div>
<script>
$(function() {
$("#ctlJob").change(function() {
//Get the current value of the select
var val = $(this).val();
$('#ctlPerson').html('<option value="123">ascd</option>');
});
});
</script>

Try using append instead:
$(function() {
$("#ctlJob").change(function() {
//Get the current value of the select
var val = $(this).val();
var ctl = $('#ctlPerson').append('<option value="123">'+val+'</option>')[0].options;
ctl.selectedIndex = ctl.length-1;
});
});
http://jsfiddle.net/J69q8/

I think you also need to set the 'selected' property. Add
$('#ctlPerson option[value="123"]').attr('selected', 'selected');
to the end of the script. You are currently adding the option to the select list, but are not changing the select list to show it.

<div id="test">
<select name="sel" id="sel">
<option name="1" id="1" value="1">Automotive</option>
<option name="2" id="1 value="2">Business 2 Business</option>
<option name="3" id="1 value="3">Computers</option>
</select>
<select name="sel2" id="sel2"></select>
</div>
<script>
$("#sel").change(function() {
var val = $(this).val();
$('#sel2').html('<option value="1">NEW</option>');
)};
</script>
this works fine for what you need to do.
it's something like what you have