How to set the default option for SELECT Tag and how to get the Index of the selected option?

Question

I would like to have a code in HTML and JavaScript that process SELECT and OPTION Elements

<select>
    <option>
    </option>
    <option>
    </option>
</select>

How I can get the Index of the selected option and then get the value of this index?

How can I make 2010 as the default option visual for users in the select tag existing in the form in a web page?

My code looks like that :

<select id="SelectYear" name="SelectYear" size="1">  
    <script type="text/javascript">
        var startyear = "1950";
        var endyear   = "2020";
        for(var k=startyear; k<=endyear; k++ ) document.write("<option value="+k+">"+k+"</option>");
    </script>   
</select>

I tried many expressions to get that index even I know it may give a different thing like:

var vIndex = document.getElementById('SelectYear').selectedIndex;    
var vIndex = document.getElementById('SelectYear').selectedIndex.value;    
var vIndex = document.getElementById('SelectYear').selectedIndex.text;  
var vIndex = document.getElementById('SelectYear').options[document.getElementById('SelectYear').selectedIndex];  
var vIndex = document.getElementById('SelectYear').options[document.getElementById('SelectYear').selectedIndex].value;  
var vIndex = document.getElementById('SelectYear').options[document.getElementById('SelectYear').selectedIndex].text;

My workaround solution is to put the index static like:

document.getElementById('SelectYear').selectedIndex = 60 ;

But if I do not know the exact index or the index is changed according to the changes happended in the SELECT elements due to database update or manual edit?

Answer 1

To set the default option based on the index, try this:

select_element.options[the_index].defaultSelected = true;

(You may also have to set this property to false to the previous default option.)

Source: DOM 2 HTML spec: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-37770574

Answer 2

<select id="SelectYear" name="SelectYear" size="1">
<script type="text/javascript">
var startyear = "1950";
var endyear   = "2020";
for(var k=startyear; k<=endyear; k++ ) 
{
  var selected = (k==2010) ? 'selected' : '';
  document.write("<option value='"+k+"'"+selected+">"+k+"</option>");
}
</script>
</select>

Answer 3

using jQuery would make this a fairly simple process. Below assumes the select box has an id of SelectYear.

$('#SelectYear :selected').text(); //the display value
$('#SelectYear :selected').val(); // the actual value

Answer 4

selectedIndex gives you the index of the option, thus a number between 0 and the total number of options. It's neither a object nor the id of the option.

var vSelect = document.getElementById('SelectYear')
var vIndex = vSelect.selectedIndex;
var vOption = vSelect.options[vIndex];

var vValue = vOption.value;

---

EDIT:

I think I'll just babble a bit about your code, because you seem to be doing several things wrong here. This may not be related to your problem, but maybe you are willing to learn something.

1) Having a script element inside a select element is invalid.

2) It seems that you are using the JavaScript-Loop to basically generate something that should be static. I would be much better to simply hard code the list of options in the HTML, or even better and if you want less work, generate it server-side.

3) You are speaking of the "default option", so you should also be doing that while generating the list, so either modify you JavaScript the way ajreal suggests, or, again better, directly give the option the selected attribute in your HTML, which is also possibe (again) server-side.

Answer 5

document.getElementById("country").value = "your index";

Answer 6

var dropDown = document.getElementById('myDropDown');
for(var i = 0; i < dropDown.options.length; i++) {
    if(dropDown.options[i].text == 'value you want to set in drop down') {
     dropDown.selectedIndex = i; 
     break;
 }

Answer 7

A chunk of working code . It will show orderDetails.type you want to see as default and the list of options.

var selectOrderType = $("<select></select>").attr("id", "edit-orderTypes").attr("name", "orderType").attr('class', 'form-control');
var orderTypes = ['Samad', 'Said', 'Koksulton', 'Man'];
$.each(orderTypes, function (indexPrm, valPrm) {
    let flagLcl = false;
    if (orderDetails.type == valPrm) {
        flagLcl= true;
    }
    let anOptionLcl = new Option(valPrm, valPrm, flagLcl, flagLcl);
    selectOrderType.append(anOptionLcl);
});