We Keep Coding

How to select multiple options if check option from a different select?

I want select multiple option from second select depending on check option from first select.
For example:
adiunkt -> mikroklimat, RTG
agent celny -> zapylenie
First select:
<select name="form[stanowisko][]" id="stanowisko">
<option value="adiunkt">adiunkt</option>
<option value="agent celny">agent celny</option>
</select>
Second select:
<select multiple="multiple" name="form[czynniki_szkodliwe][]" id="czynniki_szkodliwe">
<option value="mikroklimat">mikroklimat</option>
<option value="RTG">RTG</option>
<option value="zapylenie">zapylenie</option>
</select>
I tried this but it not working (select all options after first check):
function tes(){
if (document.getElementById('stanowisko').value ="agent celny") {
document.getElementById('czynniki_szkodliwe').options[2].selected = true;
document.getElementById('czynniki_szkodliwe').options[0].selected = true;
}
if ( document.getElementById('stanowisko').value="adiunkt") {
document.getElementById('czynniki_szkodliwe').options[1].selected = true;
}
}

Pure js solution.
let elem1 = document.getElementById('stanowisko'),
elem2 = document.getElementById('czynniki_szkodliwe');
elem1.addEventListener('change', (e) => {
Array.from(elem2.children).forEach(v => {
return v.disabled = v.getAttribute('data-attr') !== e.target.value;
})
});
<select name="form[stanowisko][]" id="stanowisko">
<option value="">-</option>
<option value="adiunkt">adiunkt</option>
<option value="agent celny">agent celny</option>
</select>
<select multiple="multiple" name="form[czynniki_szkodliwe][]" id="czynniki_szkodliwe">
<option value="mikroklimat" disabled data-attr='adiunkt'>mikroklimat</option>
<option value="RTG" disabled data-attr='adiunkt'>RTG</option>
<option value="zapylenie" disabled data-attr='agent celny'>zapylenie</option>
</select>

You should use a data attribute to mark the options linked to the first select like this:
$(document).ready(function(){
$("#stanowisko").on("change", function(event){
var $options = $("#czynniki_szkodliwe option");
//Unselect all
$options.prop("selected", false);
var val = $("#stanowisko").val();
$options.each(function(idx, item) {
if($(item).data("stanowisko").indexOf(val) >= 0) {
$(item).prop("selected", true);
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="form[stanowisko][]" id="stanowisko">
<option value="">Choose</option>
<option value="adiunkt">adiunkt</option>
<option value="agent celny">agent celny</option>
<option vlaue="lekarz">lekarz</option>
</select>
<select multiple="multiple" name="form[czynniki_szkodliwe][]" id="czynniki_szkodliwe">
<option data-stanowisko='["adiunkt"]' value="mikroklimat">mikroklimat</option>
<option data-stanowisko='["adiunkt","lekarz"]' value="RTG">RTG</option>
<option data-stanowisko='["agent celny"]' value="zapylenie">zapylenie</option>
</select>
Edit: If several options, from the first select, refers to the same options in the second select, you can "store" an array in the data attribute in JSON format.
I updated the JS code to handle JSON array in the data attributes instead of a simple string.

List displaying different option based on chosen value

I am using the following js and html code to display the lists.
MAIN PROBLEM is that when the sub-categories & categories become to many, the categories change but the sub-categries are not displaying from a certain cagory going downwards. Problem is on desktop/laptops. Working correctly on mobile device. Am not god at javascript
<script type="text/javascript">
$(function() {
$('#vehicle').on('change', function() {
var vehileType = $('#vehicle').val();
$('#vehicle-type option').hide();
$('#vehicle-type option[vehicle="'+vehileType+'"]').show();
});
});
</script>
<select id="vehicle" required name="brand">
<option value="">Select Make</option>
<option value="ABT">ABT</option>
<option value="AC">AC</option>
</select>
<select name="model" id="vehicle-type" class="form-control">
<option vehicle="ABT" value="ABT">ABT</option>
<option vehicle="ABT" value="ABT1">ABT1</option>
<option vehicle="AC" value="AC">AC</option>
<option vehicle="AC" value="AC1">AC1</option>
</select>

First I put vehicle options to custom variable var vehicleTypeOptions = $('#vehicle-type option[vehicle="' + vehileType + '"]');
Then after show I add this $('#vehicle-type').val(vehicleTypeOptions.first().val()); so it will set the value of first vehicle type option
I also put .trigger('change') for a #vehicle so it will set vehicle types by the vehicle make so you don't have to manually set one option
Here is a working demo:
$(function() {
$('#vehicle').on('change', function() {
var vehileType = $('#vehicle').val();
var vehicleTypeOptions = $('#vehicle-type option[vehicle="' + vehileType + '"]');
$('#vehicle-type option').not(vehicleTypeOptions).hide();
vehicleTypeOptions.show();
$('#vehicle-type').val(
vehicleTypeOptions.first().val()
);
}).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="vehicle" required name="brand">
<option value="">Select Make</option>
<option value="ABT">ABT</option>
<option value="AC">AC</option>
</select>
<select name="model" id="vehicle-type" class="form-control">
<option vehicle="ABT" value="ABT">ABT</option>
<option vehicle="ABT" value="ABT1">ABT1</option>
<option vehicle="AC" value="AC">AC</option>
<option vehicle="AC" value="AC1">AC1</option>
</select>

Can not set value dynamically in drop down using javascript/jquery

I have one issue.I want to set value in drop down by onchange event using javascript/Jquery. I am explaining my code below.
<h1>drop down</h1>
<p>
<select id="leaveCode" name="leaveCode" onChange="SetValue();">
<option value="10">Annual Leave</option>
<option value="11">Medical Leave</option>
<option value="14">Long Service</option>
<option value="17">Leave Without Pay</option>
</select>
</p>
<p>
<select id="leaveCode1" name="leaveCode">
<option value="">select value</option>
<option value="21">xyz</option>
<option value="21">abc</option>
</select>
</p>
function SetValue(){
var value=document.getElementById('leaveCode').value;
var name=document.getElementById('leaveCode').name;
document.getElementById('leaveCode1').value=value;
document.getElementById('leaveCode1').name=name;
}
Here my requirement is when user will select any value from 1st drop down list it will display also in second dropdown list in disable mode.Please help me.

You can use following statement that will append and make select in leavecode1 dropdown.Use following statements in your js file
jQuery('#leaveCode').change(function(){
//get selected text from #leaveCode list
text = jQuery("#leaveCode option:selected").text();
//get selected value for selected text
value = jQuery("#leaveCode option:selected").val();
//append new in #leavecode1 and make this option as selected option.
jQuery("#leaveCode1").append("<option value=" + value + " selected>" + text + "</option>");
});
You can check this using following link(updated)-http://jsfiddle.net/aecrcvt2/2/

The best way is to Append the new value in your dropdownlist on change the leaveCode dropdownlist
$("#leaveCode").change(function(){
$("#leaveCode1").append("<option value=" + $("#leaveCode").val() + ">" + $("#leaveCode option:selected").text() + "</option>")
});

I believe this is the answer you need:
$("#leaveCode").change(function(){
var selectedOptionValue = $(this).find(":selected").val();
var selectedOptionText = $(this).find(":selected").text();
var newOption = '<option value='+selectedOptionValue+' disabled>'+selectedOptionText+'</option>';
$("#leaveCode1 option").last().after(newOption);
});
JSFIDDLE

function SetValue(obj) {
var $this = $(obj);
var val = $this.val();
var txt = $('option:selected', $this).text();
$('#leaveCode1').append($('<option></option>').val(val).html(txt));
$('#leaveCode1').val(val).prop('disabled', 'disabled');
}
SetValue('#leaveCode');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>drop down</h1>
<p>
<select id="leaveCode" name="leaveCode" onChange="SetValue(this);">
<option value="10">Annual Leave</option>
<option value="11">Medical Leave</option>
<option value="14">Long Service</option>
<option value="17">Leave Without Pay</option>
</select>
</p>
<p>
<select id="leaveCode1" name="leaveCode">
<option value="">select value</option>
<option value="21">xyz</option>
<option value="21">abc</option>
</select>
</p>

Change DIV id with javascript

Trying to change the div id="test" to the value from the dropdown option selected using javascript. I have a jsfiddle started. If user selects 2013 then the div id="test" should change to div id="2013" and show the second dropdown of months. The value from the year dropdown will ultimately be used to query the database for the actual months recorded in that year but for now I'm interested in changing the div id and storing the value for later use.
<div class="report_select" id="style_container_div">
<label>Year:</label>
<select size="1" id="year" title="" type="select" name="style">
<option value="">Select Year</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
</select>
<div class="clear"></div>
<div id="error-message-style"></div>
</div>
<div id="test" class="style-sub-1" style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
<label>Select a Month:</label>
<select>
<option value=""></option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
</div>
<script type="text/javascript">
$("#year").change(function () {
var targID = $(this).val();
$("div.style-sub-1").hide();
$('#' + targID).show();
})
$("div.style-sub-1 select").change ( function () {
$("div.style-sub-2").hide ();
document.getElementById("test").setAttribute("id", targID);
$('#' + targID).show ();
} )
</script>

Note that you use jQuery instead of document.getElementById("id") you can do simply $("#id"), and instead of .setAttribute you can do .attr('attr', 'attrVal').
Because the id of $("#test") will be changed a solution would be to change the id of select parent.
// on change
var $this = $(this);
$this.parent().attr("id", $this.val());
But instead of changing the id, I recommend you to use a data-attr.
<div id="test" data-value="test">...</div>
And then to set it:
$("#test").attr("data-value", $this.val());

targID there is no variable in this method.
$("div.style-sub-1 select").change ( function () {
$("div.style-sub-2").hide ();
document.getElementById("test").setAttribute("id", targID); // error
$('#' + targID).show ();
});
from your code, it seems you're already using using jQuery therefore try it in
$('#test').prop("id","yourId");

I updated your JsFiddle. I changed your Javascript to reflect the following:
$("select#year").on('change', function () {
var targID = $(this).val();
$("div.style-sub-1").hide();
$('#' + targID).show();
})
$("select#year").on('change', function () {
var tarID = $(this).val();
$('#test').attr('id', tarID); // document.getElementById("test").setAttribute("id", targID);
$("div.style-sub-2").hide ();
$('#' + tarID).show ();
} )
However, this will not change the ID of test after it's changed. You'll have to create a function to keep track of this but it shouldn't be too difficult.

If you really want the pure JavaScript option:
document.getElementById("test").id = "2013";
I also noticed that:
$("div.style-sub-1 select").change ( function () {
$("div.style-sub-2").hide ();
document.getElementById("test").setAttribute("id", targID);
$('#' + targID).show ();
} );
Is not going to trigger in your code as it is. Did you mean to change the ID in the other .change() function?

Display selected value in dropdown menu

I have a drop down list like this:
<select id="ddlLanguage" name="culture">
<option value="null" >Language:</option>
<option value="ar-jo">Arabic</option>
<option value="en-us">English</option>
<option value="fr-FR">French</option>
<option value="es-cl">Spanish</option>
</select>
If I select "Arabic",the drop down list should display "Arabic". But am always getting "Language".
EDIT
I got the answer by using Viewbag
Script:-
<script type="text/javascript">
$(function () {
$('#ddlLanguage').val("#ViewBag.Msg");
$('#ddlLanguage').change(function () {
$('#currentCulture').val($(this).val());
$(this).parents("form").submit();
});
});
</script>
In the controller i have set value of ViewBag.Msg.
ViewBag.Msg = ddlLanguage

Try with this code
$('#ddlLanguage').change(function(){
alert( $(this).find('option:selected').text());
});

Update your dropdown with code given below:
<select id="ddlLanguage" name="culture">
<option value="null" >Language:</option>
<option value="Arabic">Arabic</option>
<option value="English">English</option>
<option value="French">French</option>
<option value="Spanish">Spanish</option>
</select>

Set the selected attribute to selected on the given option.
$("your option").attr("selected", "selected");