2013-08-02 14 views
1

Я пытаюсь изменить значение из тега select с помощью JavaScript. Предположим, что у меня есть это текстовое поле, и если это текстовое поле равно null, никаких изменений не будет сделано, и значение параметров тега select будет таким, как есть. Но если это текстовое поле заполнено, тогда мне нужно назначить другое значение, кроме тех, что указаны в опциях select tag.Изменить Выберите значение тега, используя JavaScript

Вот что я пытаюсь сделать:

HTML:

<input type="text" id="txtTest" /> 
<select name="rdoSelect" id="rdoSelect"> 
    <option value="option1">Option 1</option> 
    <option value="option2">Option 2</option> 
</select> 

JavaScript:

if (document.getElementById('txtTest').value===null) 
{ 
    document.getElementById('rdoSelect').value; 
} 
else 
{ 
    document.getElementById('rdoSelect').value = "option 3"; 
} 

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

var test = document.getElementById('rdoSelect'); 
test.value = "option 3"; 

мне нужна помощь, пожалуйста. Благодаря!

+0

вы должны изменить 'selected' атрибут элемента опции (и отменить все опции до этого) –

+0

значение входного текста никогда не будет' null'. Если на входе нет текста, это значение '' ''. Это ничего не делает: 'document.getElementById ('rdoSelect'). Value;'. Вы можете изменить выбранное значение элемента 'select', установив его' selectedIndex'. Хотя установка 'value' элемента' select' может работать в некоторых браузерах, вы не можете полагаться, что он выполнит эту работу во всех браузерах. – Teemu

+0

Почему вы сравниваете с null вместо пустой строки? '==" "' – hallaji

ответ

1

Попробуйте использовать метод SelectIndex. Пожалуйста, ознакомьтесь с приведенным ниже кодом.

Я добавил событие OnChange для ввода текста для проверки этого образца.

<html> 
<head> 
<script language="javascript"> 

    function test() 
    { 
     if (document.getElementById('txtTest').value=='') 
     { 
      document.getElementById("rdoSelect").selectedIndex = 0; 
     } 
     else 
     { 
      document.getElementById("rdoSelect").selectedIndex = 1; 
     } 
    } 

</script> 
</head> 
<body> 
<input type="text" id="txtTest" onchange="test();" /> 
<select name="rdoSelect" id="rdoSelect"> 
    <option value="option1">Option 1</option> 
    <option value="option2">Option 2</option> 
</select> 
</body> 
</html> 
+0

Мне это действительно проще. Благодаря! – edsonski

0

Это происходит при нажатии кнопки или onkeyup? В любом случае в функции вы можете добавить значение DropDownList с помощью этого:

dropdownlist.append(
    $("<option selected='selected'></option>").val(sValId).html(sVal) 
); 

Или вы colud попробовать этот

var optn = document.createElement("OPTION"); 
optn.text = "--Select--"; 
optn.value = "0"; 
baseCurve.options.add(optn);` 
0

HTMLSelectElement не позволяет установить value непосредственно. Можно иметь много или нулевых <option> s с определенным значением, поэтому это не простое отображение 1: 1.

Чтобы выбрать опцию, вы можете установить ее свойство selected в true или задать для себя значение свойства selectedIndex для выбора варианта.

В вашем выборе нет option 3. Вы пытаетесь добавить новый вариант?

например

function setOrCreateSelectValue(select, value) { 
    for (var i= select.options.length; i-->0;) { 
     if (select.options[i].value==value) { 
      select.selectedIndex= i; 
      return; 
     } 
    } 
    select.options[select.options.length]= new Option(value, value, true, true); 
} 
0
if (document.getElementById('txtTest').value===null) 
    { 
     document.getElementById('rdoSelect').value; 
    } 
    else 
    { 
     var val = document.getElementById('txtTest').value 
     for(var i, j = 0; i = rdoSelect.options[j]; j++) { 
     if(i.value == val) { 
      rdoSelect.selectedIndex = j; 
      break; 
     } 
    } 

} 
0

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

http://jsfiddle.net/GkLsZ/

$(function() { 
    $('#btnChange').on('click', function() { 
     var value = $.trim($('#txtTest').val()); 

     if (!!value) { 
      $('#rdoSelect') 
       .append($("<option></option>") 
       .attr("value", value) 
       .attr("selected", "selected") 
       .text(value)); 
     } 
    }); 
}); 
Смежные вопросы