We Keep Coding

attr('selected','selected') not working in selectpicker bootsrap with ajax [duplicate]

I am attempting to retrieve and set the selected value of a select element (drop down list) with jQuery.
for retrievel i have tried $("#myId").find(':selected').val(), as well as $("#myId").val() but both return undefined.
Any insight into this problem would be much appreciated.

to get/set the actual selectedIndex property of the select element use:
$("#select-id").prop("selectedIndex");
$("#select-id").prop("selectedIndex",1);

The way you have it is correct at the moment. Either the id of the select is not what you say or you have some issues in the dom.
Check the Id of the element and also check your markup validates at here at W3c.
Without a valid dom jQuery cannot work correctly with the selectors.
If the id's are correct and your dom validates then the following applies:
To Read Select Option Value
$('#selectId').val();
To Set Select Option Value
$('#selectId').val('newValue');
To Read Selected Text
$('#selectId>option:selected').text();

$('#myId').val() should do it, failing that I would try:
$('#myId option:selected').val()

When setting with JQM, don't forget to update the UI:
$('#selectId').val('newValue').selectmenu('refresh', true);

$("#myId").val() should work if myid is the select element id!
This would set the selected item: $("#myId").val('VALUE');

Suppose you have created a Drop Down list using SELECT tag like as follows,
<select id="Country">
Now if you want to see what is the selected value from drop down using JQuery then, simply put following line to retrieve that value..
var result= $("#Country option:selected").text();
it will work fine.

I know this is old but I just had a bear of a time with Razor, could not get it to work no matter how hard I tried. Kept coming back as "undefined" no matter if I used "text" or "html" for attribute. Finally I added "data-value" attribute to the option and it read that just fine.
<option value="1" data-value="MyText">MyText</option>
var DisplayText = $(this).find("option:selected").attr("data-value");

$( "#myId option:selected" ).text(); will give you the text that you selected in the drop down element. either way you can change it to .val(); to get the value of it . check the below coding
<select id="myId">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>`
<option value="4">Dr</option>
<option value="5">Prof</option>
</select>

Try this
$('#your_select_element_id').val('your_value').attr().add('selected');

Select <select> <option> from alternate select using jQuery, Javascript, or PHP

I needed help regarding selection copying, as I know nothing about it. Here's my problem: I need to select a state from one select, and then have it automatically select the same state in another select. But my values are different for each select, as the info will be processed to the server (otherwise, there wouldn't be a problem, because I wouldn't need to copy from one select to the other). Here is my format:
<select name="state" size="1" id="stateSelect">
<option value="AL">Alabama</option>
<select>
<select name="state" size="1" id="stateSelect2">
<option class="AL" value="Alabama">Alabama</option>
</select>
And this is my current jQuery that I've pieced together from all over the internet (that obviously doesn't work):
$(function(){
$("select[name*='state']").change(function(){
$("#stateSelect2").children(':selected').hasClass( $("#stateSelect").val() )
})
})
So, what I need is to be able to do is copy the value selected by "stateSelect", and select the value of "stateSelect2" by the class that has the value of the selected option of "stateSelect". I don't know how easy or hard this is to do, but I sure would appreciate any and all help with this issue. if you use JSFiddle, bonus points to you. Thanks!

$('#stateSelect').on('change', function(){
var v = $(this).val();
$('#stateSelect2 .'+v).prop('selected', true);
});
http://jsfiddle.net/dipser/9ca0eL1d/

Something like this should suffice:
$(document).ready(function(){
$('#stateSelect').on('change', function(){
var val = $(this).val();
if(val.length > 0 && $('#stateSelect2 option.' + val).length > 0) {
$('#stateSelect2 option.' + val).attr('selected', 'selected');
// could also use .prop() here instead of attr
// which would be .prop('selected', true);
}
});
});
The if statement makes sure that the selected option has a value and also exists in the second select.
JSFiddle Demo

How do I get selected value from Drop Down List?

I have a drop down list (DDL)...
I would usually just use $('#ddl option:selected').val()
but I have stored the jQuery object...
var myDDL = $('#ddl');
I can't figure out how I would use the variable myDDL alongside with option:selected
Not sure how to word my question really...

You simply need to call val() on the select object to get the selected value.
$('#ddl').val()
To get the variable just for the sake of knowing you can use find
selectedVal = myDDL.find('option:selected').val();
The .val() method is primarily used to get the values of form elements
such as input, select and textarea. In the case of select elements, it
returns null when no option is selected and an array containing the
value of each selected option when there is at least one and it is
possible to select more because the multiple attribute is present, jQuery Docs

Please try this.
Call this below function to see the effects.
----------------------- JS-Code -----------------------
TestFunction();
function TestFunction() {
var myDDL = $('#ddl');
var selectedVal = myDDL.find('option:selected').val();
alert(selectedVal);
}
-------------------- HTML Code --------------------------
<div id="divTest">
<select id="ddl">
<option>one</option>
<option selected="selected">two</option>
</select>
</div>

HTML:
<select id="ddlCountry" name="ddlCountry">
<option selected="selected" value="1">India
</option>
<option value="2">USA
</option>
</select>
JQuery:
$('#ddlCountry').val()
I hope this helps. If this does resolve your problem, please mark the post as answered.
Thanks,
Prashant

Try with this:
myDDL.find('option:selected').val();
As myDDL is a jQuery object, so you can use .find() method to get the selected value.

Selected using option ID

<select id="editSkillList">
<option id="0">Select</option>
<option id="8">text1</option>
<option id="5">text2</option>
<option id="4">text3</option>
</select><br><br>
Javascript code
document.getElementById("editSkillList").selectedIndex="2";
But i want set selected using option id.Is it posible? then please help me

You can just set the selects value to the text you get from the option after targeting the ID
document.getElementById("editSkillList").value = document.getElementById('4').innerText;
FIDDLE
EDIT:
If the options have a value, you just set the selects value to one of the options value
document.getElementById("editSkillList").value = document.getElementById('4').value;

You can do:
document.getElementById('5').selected = true;
Replace '5' with the id of the option you need to select.

you can select your option using below code.
Javascript
document.getElementById("editSkillList").value = document.getElementById('4').value;
or you can use this code also.
var editSkillList = document.getElementById("editSkillList");
editSkillList.options[editSkillList.selectedIndex].value;
i hope it will help you.

multiple select element - onchange

I have a select element that allows for multiple selections. I'd like to display the selected values in another part of the page (in a div or something) as the user makes changes to what is selected.
Is the only way of doing this to iterate over the "options" and check if "selected" is true? this would not be preferable since each "onchange" event would require the entire select element to be iterated over.
Here's a fiddle that demonstrates how I am currently doing it, but I'm hoping maybe there's a better way than having to iterate over all the options on every "change": multiple select elment onchange fiddle

.val() on a multiple select returns an array.
See the snippet below as an example:
$(function() {
$('#fruits').change(function(e) {
var selected = $(e.target).val();
console.dir(selected);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple="true" id="fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="mango">Mango</option>
<option value="grape">Grape</option>
<option value="watermelon">watermelon</option>
</select>

In your fiddle, I just used .val(). This returns an array
JSFiddle Link
$(function() {
$('#fruits').change(function() {
console.log($(this).val());
});
});

If you could use jQuery it might be as easy as:
$('select').change(function() {alert($(this).val())})

You could use blur instead of change, so that the select is only processed once, rather than on each selection. http://jsfiddle.net/2mSUS/3/

$(function() {
$('#fruits').change(function(e) {
var selected = $(e.target).val();
console.dir(selected);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple="true" id="fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="mango">Mango</option>
<option value="grape">Grape</option>
<option value="watermelon">watermelon</option>
</select>

You can use the :selected Selector of jQuery instead, but I believe that under the hood, jQuery does a loop on the selected = true.

element.addEventListener('click', function(){alert(this.value)})
This is a solution in JS, you can port it over to jQuery pretty easily. The idea is to add a click listener to each option in the selection. This will not work in IE8 and below because of addEventListener, there are ways to get around this though.
I think this is a better approach then having to reiterate over the list. You will have to have a listener attached to each option though.

This works:
var MyControl = document.getElementById('Control_ID');
var newValue = MyControl[MyControl.selectedIndex].value;
Of course, Control_ID is the ID of the select control.

I'm doing a form submit. My template helper looks like this:
'submit #update': function(event) {
event.preventDefault();
var obj_opts = event.target.tags.selectedOptions; //returns HTMLCollection
var array_opts = Object.values(obj_opts); //convert to array
var stray = array_opts.map((o)=> o.text ); //to filter by: text, value or selected
//stray is now ["Test", "Milk Free"] for example, depending on the selection
//...do stuff...
}
You could use a similar pattern for 'onchange'