Как установить параметр по умолчанию для тега SELECT и как получить индекс выбранного параметра?

Question

Я хотел бы иметь код в HTML и JavaScript, который обрабатывает элементы SELECT и OPTION

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

Как получить индекс выбранного параметра, а затем получить значение этого индекса?

Как сделать 2010 как визуальный вариант по умолчанию для пользователей в теге select, существующем в форме на веб-странице?

Мой код выглядит так:

<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>

Я пробовал много выражений, чтобы получить этот индекс, даже я знаю, что он может давать разные вещи, например:

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;

Мое обходное решение состоит в том, чтобы поставить индекс статическим, например:

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

НоЯ не знаю точный индекс или индекс изменяется в соответствии с изменениями, произошедшими в элементах SELECT из-за обновления базы данных или ручного редактирования?

Answer 1

Чтобы установить параметр по умолчанию на основе индекса, попробуйте следующее:

select_element.options[the_index].defaultSelected = true;

(Вам также может потребоваться установить для этого свойства значение false для предыдущего параметра по умолчанию.)

Источник: 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

selectedIndex дает вам индекс опции, то есть число от 0 до общего количества опций.Это не объект и не идентификатор опции.

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

var vValue = vOption.value;

---

РЕДАКТИРОВАТЬ:

Думаю, я просто немного поболтаю о вашем коде,потому что вы, кажется, делаете несколько вещей неправильно здесь.Возможно, это не связано с вашей проблемой, но, возможно, вы готовы чему-то научиться.

1) Недопустимо наличие элемента script внутри элемента select.

2) Этокажется, что вы используете JavaScript-Loop для создания чего-то, что должно быть статичным.Я был бы намного лучше просто жестко закодировать список параметров в HTML, или даже лучше, и если вы хотите меньше работать, сгенерируйте его на стороне сервера.

3) Вы говорите о «опции по умолчанию»Таким образом, вы также должны делать это при генерации списка, так что либо измените свой JavaScript так, как предлагает ajreal, либо, что еще лучше, напрямую дайте опцию атрибута selected в вашем HTML, что также возможно (опять же) сервер-сторона.

Answer 4

использование jQuery сделало бы этот процесс довольно простым.Ниже предполагается, что поле выбора имеет идентификатор SelectYear.

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

Answer 5

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 6

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