Как автоматически выбрать опцию в зависимости от значения входа - PullRequest
Новая
       23

Как автоматически выбрать опцию в зависимости от значения входа

0 голосов
/ 04 декабря 2010

Мне нужно, чтобы опция select была фактически выбрана в готовом документе в зависимости от значения ввода.

Пример: 

<select id="mySelect">
<option value="1">myVal1</option>
<option value="2">myVal2</option>
</select>

<input type="text" id="myId" value="2">

Например, у нас есть предопределенное значение «2» для ввода при загрузке страницы. Мне нужно, чтобы окно выбора было выбрано автоматически, а его параметр имеет то же значение, что и вход «myId». Я имею в виду 'mayVal1' должен быть выбран.

Когда вход не имеет значения, выбор должен вести себя по умолчанию.

Спасибо!

Ответы [ 3 ]

5 голосов
/ 04 декабря 2010

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

$(document).ready(
    function(){
        var theValue = $('#myId').val();
        $('option[value=' + theValue + ']')
            .attr('selected',true);
    });

С демонстрацией в JS Fiddle .

<ч />

Отредактировано в ответ на вопрос ОП:

Как сравнить значение опции с самым первым словом в значении ввода? Я имею в виду, что если у меня есть значение опции 'hello' и входное значение, сценарий 'hello world' должен выбрать опцию, содержащую 'hello' в своем значении.

Правильно, учитывая несоответствие между вашим опубликованным примером и вашим вопросом, я попытаюсь рассмотреть обе возможности.

Сначала выберите option на основе компонента text (в приведенном выше коде биты 'myVal1', 'myVal2'): 

$(document).ready(
    function() {
        $('form:eq(0)').submit(
            function() {
                var theValue = $('#myId').val().split(" ",1);
                $('option:contains(' + theValue + ')').attr('selected', true);
                return false;
            });
    });

JS Fiddle demo : обратите внимание, что текстовый компонент элемента option содержит , а не представляет значение элемента option.

Во-вторых, если вы хотите связать первую часть значения, введенного в элемент ввода myId, с значением элемента (ов) select / option: 

$(document).ready(
    function() {
        $('form:eq(0)').submit(
            function() {
                var theValue = $('#myId').val().split(" ",1);
                $('option[value=' + theValue + ']').attr('selected', true);
                return false;
            });
    });

JS Fiddle demo .

Эти демонстрационные версии могут работать с keyup() или эквивалентными действиями / событиями, но submit() показался лучшим выбором.

1 голос
/ 04 декабря 2010

в ванили JS: 

var listener = function(ev){
var input = document.getElementById('myId');
for(var i = 0, elems = document.getElementById('mySelect'), l = elems.length; i < l; i++)
    elems[i].selected = elems[i].value == input.value;    
}
listener();
document.getElementById('myId').addEventListener('change', listener, false);

с jQuery: 

$(function(){
    $('#myId').change(function(){
       $('#mySelect option').removeAttr('selected').filter('[value=' + $(this).val() + ']').attr('selected', true);
    }).change()
})
0 голосов
/ 04 декабря 2010

что-то вроде ниже должно работать /// 

<select>
    <option value="0">One</option>
    <option value="1">Two</option>
</select>

$(document).ready(
    var inputValue = $('#id').val();
    $('select').val('1'); // selects "Two"
    $('select').val(inputValue); // also selects "Two"

});
...