Блог

Главная - Вопросы по программированию - jQuery изменяет значение поля выбора на основе нажатой привязки

jQuery изменяет значение поля выбора на основе нажатой привязки

#javascript #jquery

#javascript #jquery

Вопрос:

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

 <a class="cli" href="0">Jan</a>
<a class="cli" href="1">Feb</a>
<a class="cli" href="2">Mar</a>
<a class="cli" href="3">Apr</a>
<a class="cli" href="4">May</a>
<a class="cli" href="5">Jun</a>
[...]
<a class="cli" href="11">Dec</a>

<select class="ui-datepicker-month">
<option value="0" style="display: none;">Jan</option>
<option value="1" style="display: none;">Feb</option>
[...]
<option value="9" style="display: none;">Oct</option>
<option selected="selected" value="10" style="display: none;">Nov</option>
<option value="11" style="display: none;">Dec</option>
</select>

Вот что у меня есть до сих пор, думал, что это будет просто, просто не могу обмозговать это:

 $("a.cli").click(function(event){ //when anchor is clicked
            event.preventDefault();
            $(".ui-datepicker-month").val($(this).text());
        });  
    });

Я тоже пробовал это

 $("a.cli").click(function(event){ //when anchor is clicked
        event.preventDefault();
        $(".ui-datepicker-month").val($(this).attr("href"));
    });  
});

Все еще не сработало.

Ответ №1:

Поскольку value значения сохраняются в href атрибуте, используйте:

 $("a.cli").click(function(event){ //when anchor is clicked
    event.preventDefault();
    $(".ui-datepicker-month").val($(this).attr("href"));
});

Комментарии:

1. Если вы когда-нибудь захотите выбирать по текстовому содержимому, выполните цикл по каждому дочернему элементу ( $(".ui-datepicker-month option").each(..) и проверьте с помощью $(this).text() == linktext , имеет ли параметр желаемое значение.

2. но проблема сейчас в том, что первый щелчок не изменяет значение, а второй щелчок изменяет…

3. Какую версию jQuery вы используете? Редактировать . Почему вы используете display:none ?

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

5. Я протестировал код, используя jQuery 1.6.1, по адресу: jsfiddle.net/tpR5e . Это работает так, как задумано.

Ответ №2:

Почему измените значение, а не выберите опцию, которая имеет значение «нажата»?

 <a class="cli" href="0">Jan</a>
<a class="cli" href="1">Feb</a>
<a class="cli" href="2">Mar</a>


<select id="month" name="month" class="ui-datepicker-month">
<option value="0">Jan</option>
<option value="1">Feb</option>
<option value="2">Mar</option>
</select>

Скрипт:

 jQuery('a.cli').click(function(event) {
    event.preventDefault();

    jQuery('#month option').attr('selected', false);
    jQuery('#month option[value="'   jQuery(this).attr('href')   '"]').attr('selected', true);
});

Проверьте это http://jsfiddle.net/jchiotaka/uaLXU /

Ответ №3:

Попробуйте это:

 ...
<a onClick="$('select.ui-datepicker-month').val('1');">Feb</a>
...


<select class="ui-datepicker-month">
...
<option value="1">Feb</option>
...
</select>