Develop Reference

Jquery to update dropdown

I need to use jQuery to change following dropdown for example
<select id="select1">
<option value="free">Free</option>
<option value="basic">Basic</option>
</select>
to
<select id="select1">
<option optionId="0" value="free">Free</option>
<option optionId="1" value="basic">Basic</option>
</select>
The optionIds value will depend on the number of options.
I am not able to hard code dropdown, it needs to be jquery.
The number of options is generated by MVC DropdownListFor()
Not sure but something like, but not sure how to set unique values:
$(.select1 options).attr("optionId")

Using jQuery (or plain JavaScript) you can create a function that accepts a select ID and adds the attributes to the option elements. It would also be easy to modify the code to apply the attribute to all selects on the page.
Note that jQuery attr() (setAttribute) converts names to lower case. So optionId becomes optionid. Would be better to use a data attribute for this like data-id, which would be more standard.
function setOptions(id) {
$("#" + id + " option").each((index, option) => {
$(option).attr("optionId", index);
});
}
Snippet
function setOptions(id) {
$("#" + id + " option").each((index, option) => {
$(option).attr("optionId", index);
});
stdout.innerHTML += $("#" + id).html(); // test
}
setOptions("select1");
setOptions("select2");
<select id="select1">
<option value="free">Free</option>
<option value="basic">Basic</option>
</select>
<select id="select2">
<option value="free">Free</option>
<option value="basic">Basic</option>
<option value="advanced">Advanced</option>
</select>
<br/>
HTML:
<textarea id="stdout" style="width:100%;height:8em;"></textarea>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

how to get multiple dropdown list value in jQuery when i clone multiple dropdown

when i click button clone is worked but it is showing value only one dropdown list
i want to get value clone multiple dropdown list and show the alertbox
there is my code
$(document).ready(function() {
$('#btnid').click(function() {
$('#idcuntry').clone().attr('id', 'id_' + $(this).index()).insertAfter('#idcuntry');
var a = $('#idcuntry').val();
alert(a);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="idcuntry">
<option value="10">Selection </option>
<option value="20">Pa </option>
<option value="30">India </option>
</select><br/>
<input type="button" value="clone" id="btnid">

The first problem is that you are getting the value of #idcuntry, and there's only one with this ID (which is good, IDs should be unique, so you made the right choice of changing the ID of your clones).
To target multiple elements, you can add a class to them, for example class="countryselect".
Then, .val() will only return the value of the first element. But you can use .map() to get them all in an Array:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#btnid').click(function() {
$('#idcuntry').clone().attr('id', 'id_' + $(this).index()).insertAfter('#idcuntry');
var a = $('.countryselect').map(function() {
return $(this).val();
}).get();
alert(a);
});
});
</script>
<select id="idcuntry" class="countryselect">
<option value="10">Selection </option>
<option value="20">Pa </option>
<option value="30">India </option>
</select><br/>
<input type="button" value="clone" id="btnid">

Why select option change event can't have this and event.target to get selected value?

In select option change event,why can't we get this or event.target to get selected value instead of writing clumsy code like $( "select option:selected" ) to get selected value ?

Pure JavaScript
If you want a pure JavaScript approach, then use the event.target. To quote the official MDN documentation...
The target property of the Event interface is a reference to the object onto which the event was dispatched. (Source: MDN Web Docs: Event.target.)
Since that gives us the element selected, all we then need is the value attribute, and getting the text display would be nothing more than event.target[event.target.selectedIndex].text...
function getSelectedValue(event) {
console.log("Value: " + event.target.value + "; Display: " + event.target[event.target.selectedIndex].text + ".");
}
<select onchange="getSelectedValue(event)">
<option selected disabled>--Pick an Option--</option>
<option value="blue1">Blueberry</option>
<option value="rasp2">Raspberry</option>
<option value="straw3">Strawberry</option>
</select>
Using the above approach, it would be trivial to update it to add in other attributes of the selection option value, all in pure JavaScript.
jQuery
If you want a jQuery approach, then try using the :selected query term...
$("#selector").on('change', function(){
console.log("Value: " + $(this).val() + "; Display: " + $(this).find('option:selected').text() + ".");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selector">
<option selected disabled>--Pick an Option--</option>
<option value="blue1">Blueberry</option>
<option value="rasp2">Raspberry</option>
<option value="straw3">Strawberry</option>
</select>

$("select").on('change', function(){
console.log($(this).val());
console.log($(this).find('option:selected').attr('data-attribute'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select>
<option data-attribute="a">1</option>
<option data-attribute="b">2</option>
<option data-attribute="c">3</option>
<option data-attribute="d">4</option>
</select>

You can't get the selected value, but of course you can get the element and the event.target.
<select onchange="mySelectOnchange(this, event)"></select>
function mySelectOnchange(elm, e) {
// **
}

It exists... take a look at this code for example
var selectElem = document.getElementById('select');
selectElem.addEventListener('change', onSelect_change);
function onSelect_change(domEvent){
// get the selected value :
var selectedValue = domEvent.target[domEvent.target.selectedIndex].value;
// you can also do it using domEvent.target.value but the other solution allows you to get every option's property you want
console.log("Selected: " + selectedValue);
}
<select id="select" name="select">
<option value="value1">Value 1</option>
<option value="value2" selected>Value 2</option>
<option value="value3">Value 3</option>
</select>
Hope it helps ;)
PS: have a look on http://www.w3schools.com/jsref/prop_select_selectedindex.asp if you want more examples

The only property that's automatically transferred from the selected option to the <select> element itself is the value, because that's the main purpose of selecting an option from a drop-down menu. Other attributes like data-* are not automatically copied, because it's possible for the <select> to have its own attributes, e.g.
<select id="x" data-name="select">
<option value="1" data-name="option1">1</option>
<option value="2" data-name="option2">2</option>
</select>
It wouldn't make sense for $("#x").data("name") to return the name of the selected option instead of the name of the <select>.

<select onchange="getSelectedValue(this)"></select>
...
function getSelectedValue(select) {
console.log(select.value)
}

How to drop muliple option from a select box and place it to another div using jquery?

<seelct id="country" multiple="multiple">
<option id="">USA</option>
<option id="">UK</option>
<option id="">CA</option>
<option id="">USA</option>
</select>
<div class="item-group"></div>
I need to drag the countries into this 'div'. Any help?

I guess what you want to do is append the values of the countries into the item-group div. This would do it:
var group = $('.item-group'); //let's query this once
$('option').each(function() {
group.append('<p>' + $(this).val() + '</p>');
});

Using jQuery to replace an option element in one select box with another?

I have two select boxes, one of which is dynamically populated. The second box I would like to replace the option element with whatever is selected. At the moment, I have it working with this:
var currentManCodeSelected = $('#sltmanu').find(':selected')[i].value;
var currentManCodeName = $('#sltmanu').find(':selected')[i].text;
$('#sltmanuCurrent option:first').replaceWith("<option value='" + currentManCodeSelected + "'>" + currentManCodeName + "</option>");
Is there a better way of doing this? A shorter and more elegant way?

You can do that like following;
HTML:
<select id="left">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<select id="right">
<option value="d">d</option>
<option value="e">e</option>
<option value="f">f</option>
</select>
JS:
$(document).ready(function() {
$("#left").on('change', function() {
$('#right :selected').val($('#left :selected').val()).text($('#left :selected').text());
});
});
Here is a working fiddle: http://jsfiddle.net/Azugu/

Just change the value and text instead of replacing the whole element
$('#sltmanuCurrent option:first').val(currentManCodeSelected).text(currentManCodeName);