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');

jquery on select change hide/show div

I have this select drop-down where in my drop-down when i select one of the choices the div for that particular choice will be displayed and the rest will remain hidden.
I tried using this Demo but it don't work.
<form id="nl-form" class="nl-form">
<select id="choices">
<option value="family" selected>family</option>
<option value="closefriend">close friend</option>
<option value="acquaintance">acquaintance</option>
</select>
<div class="nl-overlay"></div>
</form>
<div id="family" class="chosentree">family</div>
<div id="closefriend" class="chosentree">closefriends</div>
<div id="acquaintance" class="chosentree">acquaintance</div>
$(function() {
$('.chosentree').hide();
$('#choices').change(function(){
//$('.chosentree').hide();
$('#' + $(this).val()).show();
});
});
What could be the problem?
and also on the div family, I want to place this ff. Demo how should it be done? Notice that it has a link script file check external sources in jsfiddle
I'm new with this and I don't know what should be the proper placing of codes.

your code need
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>// you can add what ever is latest version available.
since you have written change event better add a dummy select option like:
<option value="select" selected>select</option>
otherwise it is working.
Here is your working demo after loading above library
FiddleDemo

I solved it by putting
$(this.elOriginal).find('option').removeAttr("selected");
$(this.elOriginal).find('option:eq('+this.selectedIdx+')').attr("selected", "selected");
$(this.elOriginal).trigger('change');
in close function in nlform.js
Then by listening to change event of the select element I get my goodies!

Not sure if this is still relevant, but nl-form doesn't actually use the select inputs. If you observe the page in Firebug, you'll notice the actual Select elements have a visibility of "none". What nl-form does is actually take the options in the select that you create and turns them into a series of different html elements (div, a, and ul elements). So when you change an option on an nl-form select, you cannot listen for the change event because it doesn't actually happen.
It turns out it's not real easy or fun to do. What I did to monitor the changes was create a custom event at the bottom of the close() method in nlform.js. Then in my javascript, I listened for that particular event and had to write a lot of javascript to find the elements I needed...it did eventually work. It's a lot of work though.

How to style the disabled and selected 'option' of a 'select' in HTML5

I'm trying to use the first 'option' of a 'select' tag as a prompt to the user that input is required. So, I'd like the 'select' box to render the selection in a different color if the selected option is disabled.
So given the following code:
<select>
<option selected="selected" disabled="disabled">Choose best player...</option>
<option>Walter Payton</option>
<option>Jim McMahon</option>
<option>Mike Singletary</option>
<option>Richard Dent</option>
<option>Steve McMichael</option>
<option>Wilber Marshall</option>
</select>
I'd like the page to show the dropdown with "Choose best player..." in the color gray and then change the color if a non-disabled option is chosen.
I'd prefer a css solution if it exists, but after googling for quite some time I'm beginning to be convinced that some JavaScript will be required. Any simple solutions out there?
Here's a codepen with this preloaded.

I think you need a little javascript:
HTML
<select onchange="highlight(this)">
<option class="invalid" selected="selected" disabled="disabled">Choose best player...</option>
<option>Walter Payton</option>
<option>Jim McMahon</option>
<option>Mike Singletary</option>
<option>Richard Dent</option>
<option>Steve McMichael</option>
<option>Wilber Marshall</option>
</select>
CSS
option.invalid {
background: #eee;
}
option.valid {
background: #ff8;
}
JavaScript
function highlight(field){
field.options[0].className = 'valid';
}
jsFiddle Demo.

I think your difficulty (with a pure css solution) will be targeting your select element based on the attributes of a child element.
I would use some javascript to check that selected item isn't disabled and then apply your css.

Pure css you want:
select option[disabled="disabled"][selected="selected"]
{text-decoration:underline;}
This will style an option with both disabled and selected set. However, beware of browser compatability issues.
Demo
It won't however remove the style when another option is selected. According to MDN option:checked should be able to be used, but I have not been able to get it to work reliably (http://jsfiddle.net/gb35e6yj/).

how to disable an option with msdropdown plugin

Is it possible to disable an option after creating a msDropdown plugin?
I explain my problem better.
I want to put html into each option with icons, text and some other stuff, so first i create an empty select then I add each option with the add function:
dropdown.add({text:$price.html(), value:'normal', className:'normal'});
The problem is that if a certain condition happen I have to disable one option, but there are no way to set an option disabled by using plugin settings.
There is the possibility to make an option disabled only by setting the related parameter disabled=disabled into the select before to call the msDropdown function, but I can't use this solution since I have to put dinamically html into option text.
Is there another way to do it?
Thank you for your help.

I found a solution.
I create my select empty and I fill each option with add function as before, but when that condition happen just do this:
var dropdown = $('select[name="priceType"]').msDropdown().data("dd");
if(credits_error) { // option must be disabled
dropdown.destroy(); // Make it a simple select
$('select[name="priceType"] option').attr('disabled', 'disabled');
dropdown = $('select[name="priceType"]').msDropdown().data("dd");
}
This way first I make it a simple select by calling destroy function, then I set properly the disabled attribute and I create a new msDropdown select.
It works for me, I tested it on IE, FF and Chrome

Yes, it is possibile. It can be done by using the disabled property of the option tag:
<select id="payments" name="payments" style="width:250px;">
<option value="" data-description="Choos your payment gateway">Payment Gateway</option>
<option value="amex" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Amex-56.png" data-description="My life. My card...">Amex</option>
<option value="Discover" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Discover-56.png" data-description="It pays to Discover...">Discover</option>
<option value="Mastercard" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Mastercard-56.png" data-title="For everything else..." data-description="For everything else...">Mastercard</option>
<option value="cash" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Cash-56.png" data-description="Sorry not available..." disabled="true">Cash on devlivery</option>
<option value="Visa" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Visa-56.png" data-description="All you need...">Visa</option>
<option value="Paypal" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Paypal-56.png" data-description="Pay and get paid...">Paypal</option>
</select>
The option 'cash' will be disabled.
Here is a working fiddle: http://jsfiddle.net/NKQRj/1/
EDIT
In this second example data are loaded from JSON data using:
$("#payments").msDropDown({byJson:{data:jsonData, name:'payments2'}}).data("dd");
to fill the elements.
You can define your options as disabled in your JSON data using disabled: true property:
{image:'http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Cash-56.png', description:'Sorry not available...', value:'cash', text:'Cash on devlivery', disabled:true},
here is a working fiddle: http://jsfiddle.net/NKQRj/3/

Is there a simple way to know the starting value of a select?

I'd like to do this simply without saving the starting value of the select in an object.
if i have (when i load the dom):
<select>
<option value='1' selected>one</option>
<option value='2' >Two</option>
and than i later change the selection so that another option is selected, is there some kind of property that stores the value of the option that was originally selected?

I think this sholud work:
$("select option[selected]").val()
fiddle: http://jsfiddle.net/4dCMd/
Tested this way in different browsers: seems to be broken in IE7/8, works in last Chrome, FF and IE9

You should use the defaultSelected property of the options object to test if it was selected by default.
http://www.javascriptkit.com/jsref/select.shtml

use this
$('select').find('option[selected]').val();
DEMO

$('select').each(function(){
$(this).data('originalValue',$(this).val());
});
You could do this on .ready. It'll store the default values of every select in it's data object.
Oh just re-read your question and you said that's exactly what you don't want.
Well, i don't think there's another efficient way to do it so i'll leave it here anyway.

simple to use filter to get any default selected options:
var def = $("select > option").filter(function () {
return this.defaultSelected;
});
DEMO
DefaultSelected
Reflects the value of the selected HTML attribute. which indicates whether the option is selected by default.