We Keep Coding

Setting the first value as default in dropdown list

Jquery to create new row :
var selectVal = $(parent).children().first().find('select').find('option[selectedGivenTo="true"]').val();
var newSelect = $(parent).children().last().find('select');
newSelect.each(function() {
var cloned = null;
cloned = $(this).clone();
cloned.val(selectVal);
I am trying to select the first value of dropdownlist as default value using jQuery as above but no value is selected & just displaying list in dropdown.I saw many references in stackoverflow but its not working for me.

HTML:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi">Audi</option>
</select>
jQuery:
$(function(){
$("select option:first").attr('selected','selected');
var _select = $('select')[0],
_v = _select.options[_select.selectedIndex].value;
alert(_v);
});
Demo

If you want to select it by value, then use the code below:
$('select option[value="defaultValue"]').attr("selected",true);
If you want to select via text contains in option, use the following code:
$('select option:contains("I am defualt Value")').prop('selected',true);

How can I get the value of a custom attribute in a dropdownlist using javascript or jquery

I have dropdownlist on a webform. I need a 'hidden' variable per item in the dropdown list which I can retrieve clientside using the onchange event.
So on the page load I'm setting a custom attribute after I databind the dropdownlist:
For i = 0 To cboNameAL.Items.Count - 1
cboNameAL.Items(i).Attributes.Add("Charge_Rate", usernamesAdapterDataTable.Item(i).ChargeRate)
Next
This works and when I look at my rendered page I see this markup for each item in the dropdownlist
<option value="05ab8c45-f7ce-4250-8458-1421e79e8a51" charge_rate="32">dave</option>
My javascript function is firing fine from the onchange event, however I can't retrieve the attribute value for Charge_Rate.
I've tried every combination of:
var lCharge_Rate = document.getElementById("<%=cboNameAL.ClientID%>").selectedItem.attributes('Charge_Rate');
var lCharge_Rate = document.getElementById("<%=cboNameAL.ClientID%>").attributes('Charge_Rate');
var lCharge_Rate = document.getElementById("<%=cboNameAL.ClientID%>")attr('Charge_Rate');
var lCharge_Rate = document.getElementById("<%=cboNameAL.ClientID%>").getAttributes('Charge_Rate');
Each with either ('Charge_Rate') or ("Charge_Rate") or .Charge_Rate
I've debugged and the best I can do is for my variable lCharge_Rate to be null.
Any ideas? Happy to rework if it can't be done this way...

You can use the following code to get the value of your custom attribute
//This line will load the DOM of dropdown
var cboNameAL = document.getElementById("<%=cboNameAL.ClientID%>");
//This will return the selected option
var selectedOption = cboNameAL.options[cboNameAL.selectedIndex];
//This will give you the value of the attribut
var charge_rate = selectedOption.attributes.charge_rate.value;

You need to select the options first before you can get the attribute.
var e = document.getElementById("client_id"),
lCharge_Rate = e.options[e.selectedIndex].getAttribute('charge_rate');
document.write("Charge Rate = "+lCharge_Rate);
<select id="client_id">
<option value="05ab8c45-f7ce-4250-8458-1421e79e8a51" charge_rate="32">dave</option>
</select>

Create a variable that equals the value of your custom attribute, then use it as you desire. See my example and adjust as needed.
var $divAtribut = $("div").attr("Charge_Rate");
alert($divAtribut);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div Charge_Rate="4424">Click on run to get the attribute</div>

<code>
<!– my html –>
<select name="custom-select-two">
<option value="1" data-monthvalue="31">Jan</option>
<option value="2" data-monthvalue="28">Feb</option>
<option value="3" data-monthvalue="31">Mar</option>
<option value="4" data-monthvalue="30">Apr</option>
<option value="5" data-monthvalue="31">May</option>
<select>
<!– Get value of option’s custom attribute value from dropdown or select box –>
<script type="text/javascript">
$(document).ready(function(){
var monthvalue = $('.custom-select-two :selected').data('monthvalue');
alert(monthvalue); // here comes your dropdown option's custom attribute value
});
</script>
</code>

How do I find a dropdown value from a dropdown label

Suppose I have a dropdown as
<select name="Countries" id="Countries">
<option value="USA">United States of America</option>
<option value="AUS">Australia</option>
</select>
Suppose on load of a page I get a sample text as "Australia" then I want to get its respective value as "AUS"
I want to get dropdown value from its label.

Would be something like this:
var e = document.getElementById("Countries");
var str = e.options[e.selectedIndex].value;

Thanks to everyone who helped me here.
Below is the solution to get label from the selected value of a droddown.
var e = document.getElementById("Countries");
var str = e.options[e.selectedIndex].innerHTML;

http://jsfiddle.net/mm18qrwd/1/
I think you don't have index of selected element,
hence,
var value = "";
Array.prototype.slice.
call(document.
getElementById("Countries").
options).
forEach(function(option){
if(option.text == "Australia") {
value = option.getAttribute("value")
}
})
alert(value);

if you are using JQuery, this code $('#Countries').val() will return what you want.

How to get all different dropdown have selected value or not

I want to check that all dropdown on page have select value or not?
fox Ex:-
<select id="#model.Id">
<option value="0">---</option>
<option value="1">abc</option>
<option value="2">xyz</option>
</select>
<select id="#model.Id">
<option value="0">---</option>
<option value="14">abc</option>
<option value="25">xyz</option>
</select>
Both are not same page and and issue there is dynamic id and name are assign to both of dropdrop down so i can't use jQuery by id or name and get selected value, not i want to check that both have selected value by Javascript or jQuery?
How can I do this?
Regards,
Vinit

Try this : you can iterate all select boxes on page using .each() and compare it's value with 0. If select value is 0 it means it is not selected otherwise selected.
$(function(){
$('select').each(function(){
var value = $(this).val();
var id = $(this).attr('id');
if(value==0)
alert('this dropdown has no selected value, id = '+id);
else
alert('this dropdown has selected value, id = '+id);
}):
});
Edit - as OP want to check if both dropdowns selected then show button otherwise hide it, use below code
$(function(){
$('select').change(function(){
var totalUnselectedDropdown = $('select option[value="0"]:selected').length;
if(totalUnselectedDropdown==0)
{
// enable button
$('#buttonId').prop('disabled',false);
}
else
{
// disable button
$('#buttonId').prop('disabled',true);
}
}):
});

you can do it this way:
$("select").each(function(){
alert($(this).val()) // will alert selected option value attribute value
if($(this).val() > 0) // value greater than 0 means value selected
{
alert("Value Selected")
}
})

Try this :
$("select").each(function(){
if(parseInt($(this).val()) > 0){
//all select have selected value
}
else
{
//any one/all select have not selected value
return false;
}
});

Access selected values from html multiselect with javascript

This is my multiselect form HTML
<select id="designation" name="designation" multiple="multiple">
<option value="cheese" >Cheese</option>
<option value="tomatoes" >Tomatoes</option>
<option value="mozarella" >Mozzarella</option>
</select>
Here is how I'm trying to access the selected values with js.
$(document).ready(function(){
$('#designation').multiselect();
var selectedValues = $('#designation').val();
});
selectedValue is always assigned nul by $('#designation').val()
How can I fix this ?
I have also tried
$("select.designation option:selected").val();

You multiselect will initially be null when the page loads, which is what your code is showing. The code below will update the variable selectedValues whenever you click away the multiselect box.
$(document).ready(
function(){
$('#designation').click(function() {
var selectedValues = $('#designation').val();
});
}
);
Example here: http://jsfiddle.net/83brpjav/

.multiselect("getChecked") method returns all selected check boxes
Try this -
For single selection-
var value = $('#designation').multiselect("getChecked").val();
console.log(value);
For multiple selection -
var values = $('#designation').multiselect("getChecked").map(function(){
return this.value;
}).get();//return you the all selected values as an array
console.log(values);