Динамический выпадающий список выбора JavaScript - PullRequest
Новая
       2

Динамический выпадающий список выбора JavaScript

1 голос
/ 22 сентября 2010

Это было интересно. В раскрывающемся списке выбора, пытаясь не использовать jQuery (за исключением облегчения некоторых моих проблем при воссоздании), я столкнулся с проблемой, которая не позволяет каким-либо текущим браузерам ловить выбранную опцию. Вот мой код для страницы, воссоздающей проблему (помните, что jQuery не обязательно должен решать проблему, но более или менее просто говорит мне, что я делаю неправильно.

Это меня поставило в тупик. 

    <html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>

<div id="select-holder" />
<input id="some-button" type="button">

<script type="text/javascript">

$("#some-button").click(function(){

    var select_element = document.createElement('select');
    select_element.setAttribute("id", "some-id");
    select_element.setAttribute("name", "some-name");

    var options = new Array();
    for ( var i = 0; i < 3; i++ ){
        options.push(new Option("Option " + i, "Value" + i, false, false));
    }
    options[1].setAttribute("selected", "selected");

    for ( var option in options ){
        select_element.appendChild(options[option]);
    }

    $("#select-holder").append(select_element);
});

</script>
</body>
</html>

HTML, который это создает: 

    <select id="some-id" name="some-name">
    <option value="Value0">Option 0</option>
    <option value="Value1" selected="selected">Option 1</option>
    <option value="Value2">Option 2</option>
</select>

Но аномалия здесь заключается в том, что (по крайней мере в Firefox) выбранная опция заканчивается вариантом 0, который не является выбранным элементом DOM. В IE6 этот выпадающий список вообще не работает.

Есть альтернативный метод, который работает, который включает в себя объединение параметров вручную, который работает во всех протестированных мной браузерах.

Ответы [ 5 ]

4 голосов
/ 22 сентября 2010

Небольшое изменение заставило меня работать в Firefox: 

...
//options[1].setAttribute("selected", "selected");
options[1].selected = true;
...

Я управляю атрибутами элемента DOM напрямую. Не уверен, почему ваш метод не работает. Возможно, вам следует сохранить обе строки, чтобы в сгенерированном HTML-файле содержалось selected = "selected".

2 голосов
/ 13 октября 2012

какой-то старый поток - однако попробуйте что-то вроде этого: 

var idx=0;
while(obj.options[idx]) {
  if(obj.options[idx].value==value) obj.options[idx].setAttribute('selected',true);
  else  obj.options[idx].removeAttribute('selected');
  idx++;
}
1 голос
/ 22 сентября 2010

Используйте selectedIndex, чтобы установить выбранный индекс выбранного объекта.options.selectedIndex = 1;

0 голосов
/ 22 сентября 2010 
options[1].setAttribute("selected", "selected");

вероятно, где ваша проблема лежит.Вывод, который вы получаете: 

<option value="Value1" selected="selected">Option 1</option>

и стандарт: 

<option value="Value1" selected>Option 1</option>

Вы можете сделать: 

options[1].selected = true;
0 голосов
/ 22 сентября 2010

Вот рабочий код, который выглядит как хак! 

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>

<div id="select-holder" />
<input id="some-button" type="button">

<script type="text/javascript">

$("#some-button").click(function(){

    var select_element = document.createElement('select');
    select_element.setAttribute("id", "some-id");
    select_element.setAttribute("name", "some-name");


    for ( var i = 0; i < 3; i++ ){
        var option_element = document.createElement('option');
        option_element.setAttribute('value', "Value" + i);
        option_element.appendChild( document.createTextNode( "Option " + i ) );
        if (i == 1){
            option_element.setAttribute("selected", "selected");
        }
        select_element.appendChild(option_element);
    }

    $("#select-holder").append(select_element);
});

</script>
</body>
</html>
...