We Keep Coding

Set value of select to first child of that select

My code dynamically generates the options for the select element but the exact value of the options are unknown at the moment of creation.
So was playing around to set the selected value of my select element to the first child but was unable to do so in 1 line.
I was able to it in 2 lines but I was wondering if something shorter is possible.
<select id="selectElement">
<option value="1">Optie 1</option>
<option value="2">Optie 2</option>
</select>
$("#selectElement").val($(this).children(":first").val());

It's worth noting that most browsers will automatically select that first option for you.
But if you need to do it for some reason: You're not far off at all, but this doesn't come from the first part of that line. Instead:
var select = $("#selectElement");
select.val(select.children(":first").val());
Or I find this simpler:
var select = $("#selectElement");
select.val(select[0].options[0].value);
Or using the selected property of the option instead:
$("#selectElement")[0].options[0].selected = true;
// or with more jQuery
$("#selectElement > option:first").prop("selected", true);

One method is using .eq() selector.It reduce the set of matched elements to the one at the specified index.
Please try this:
$(selectElement).val($('#selectElement option:eq(0)').val());
See reference here
If you want the shortest method please try this:
$("#selectElement").prop("selectedIndex", 0);

If you have only one element, you should find it (with # id selector), and the also use his selector to find the children.
Otherwise you could use (in case you also have more elements) use a class, and iterate it (the second script in the snippet)
edit
Without js, you could simply use the selected property of option to set as default when page loads.
$("#selectElement").val($("#selectElement").children("option:first").val());
$(".selectElement").each(function() {
$(this).val($(this).children("option:first").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectElement">
<option value="1">Optie 1</option>
<option value="2">Optie 2</option>
</select>
<select class="selectElement">
<option value="21">Optie 21</option>
<option value="22">Optie 22</option>
</select>
<select>
<option selected value="321">Optie 321</option>
<option value="322">Optie 322</option>
</select>

You can achieve this by using :first
$(document).ready(function () {
$("#selectElement").val($("#selectElement option:first").val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="selectElement">
<option value="1">Optie 1</option>
<option value="2">Optie 2</option>
</select>

No need to use JavaScript to set selected the first element of the options because html will do it for you:
<select id="selectElement">
<option value="1">Optie 1</option>
<option value="2">Optie 2</option>
</select>

Selected Value in dropdownList using Jquery does not appear after set it

I have a problem with asp:dropdownlist when I try to change selected value to some thing using jquery after set the value, dropdownlist shows me last value and does not update to new selected value that have been set by me.
I try it(my html code)
<select name="ctl00$cphMain$ddlBankList" id="ddlBankList">
<option value="2">a</option>
<option value="67">b</option>
<option value="85">c</option>
<option value="175">d</option>
<option value="84">e</option>
<option value="86">f</option>
</select>
and to modify html i use this js
$("#<%=ddlBankList.ClientID%> option:selected").removeAttr("selected");
$("#<%=ddlBankList.ClientID%> option[value='67']").attr('selected', 'true');
But dropdownlist does not Jump to 67 value.

use this
$("#ddlBankList").val(67);
JSFIDDLE

You can use Jquery val function directly for select option in dropdown.
$("#<%=ddlBankList.ClientID%>").val('67');

Change a Select Option value with no id/class

There's this website that I want to change how they display their dropdown menu.
http://i.stack.imgur.com/Wu718.jpg
I wanted to make it so that the default value is "Items for Sale", instead of "Forum Topics"
Here's their source code.
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
Since I don't really care about how it looks, I just want to change the value="topics" to value="s" even without changing the texts.
I've read some tutorials, but they mostly use IDs and Classes as a selector, in this case, how do I target this Select from many other in their website and change the value.

You can use:
$('select[name=sec]').val('s');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
I think this is what you're describing in the comments below:
var dropdown = $('select[name=sec]');
// change the s option to items
dropdown.find('option[value=s]').attr('value', 'items');
// change the topics option to s
dropdown.find('option[value=topics]').attr('value', 's');
// change the dropdown's value to s
// (first option should continue to be selected because its value is now s)
dropdown.val('s');
// (this is for demo purposes only)
dropdown.after($("<div>").text("New HTML is: " + dropdown[0].outerHTML));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>

You can use the name or any other attribute.
for css
select[name="sec"]
or jquery
$('select[name="sec"]').

DEMO inspect element from your browser to see the changes
you can select a select dropdown list with select[name=sec] and select the first option with option:first
$('select[name=sec] option:first').val('s');
and if you need to change any of options just use .eq()
$('select[name=sec] option').eq(0).val('s'); // eq(0) for the first option element . eq(1) for the second option element ...

If you want to make selected an other option use this code:
$('select[name="sec"]').find('option:selected').removeAttr('selected');
$('select[name="sec"]').find('option[value="s"]').attr('selected','selected');
This script removes the default selection (the first option) and select the option which has "s" value. For the Demo:
$('select[name="sec"]').find('option:selected').removeAttr('selected');
$('select[name="sec"]').find('option[value="s"]').attr('selected','selected');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
You have to find this element in the DOM. For this you should find the first parent container element of the which has ID or CLASS attribute. From that element you can create a search for the element what you want by using the .find() method.
If there're more element which has name attribute with "sec" value you should build a chain of find which separate that you want. For that you can use these function templates:
$(#CONTAINER_ID).find(.SUBCONTAINER_CLASS).find(ELEMENT_TYPE);
$(#CONTAINER_ID).find(SUBCONTAINER_TYPE).find(OTHER_SUBCONTAINER_TYPE:eq(X));

how to use a different value from that selected in a drop down

I'm trying to figure out how (if possible, which I'm sure I can) to use a different value to that selected in a drop down box in HTML. Happy to use jQuery or JavaScript. So for example I have a series of dropdowns as follows:
<select id="country" title="Country">
<option>Argentina ARG</option>
<option>Australia AUS</option>
<option>Austria AUT</option>
<option>Austria AUT</option>
<option>Belgium BEL</option>
<option>Brazil BRA</option>
<option>Canada CAN</option>
</select>
Naturally when a user chooses say 'Brazil' the option displays 'Brazil BRA'. However, I would like to instead use the value 'BRA' is it possible to do this? Am I just being dumb and it can be done in plain HTML?

<option value="BRA">Brazil BRA</option>
Side note: I believe IE6 needs that value or things get funky onsubmit.

Use the value attribute: http://www.w3schools.com/tags/att_option_value.asp

<select id="country" title="Country">
<option value="ARG">Argentina</option>
<option value="AUS">Australia</option>
</select>

You can use the options value-attribute. This way the text that is shown to the user is Argentina ARG, but the value that is posted with the form is just ARG.
<select id="country" title="Country">
<option value="ARG">Argentina ARG</option>
<option value="AUS">Australia AUS</option>
...
</select>

Get the value of select jquery

<select id="my-select">
<option value="1">This is one</option>
<option value="2" selected>This is two</option>
...
</select>
Is there a way to get the text value of the selected option?
$('#my-select').val();
gives me 2, i want to get This is Two instead.
How?

What you want is
Get the selector for finding the selected option in the select box
Use .text() on the selector.
$('#my-select option:selected').text();
See a working demo