Назначьте click () дочернему элементу управления в jquery

Question

У меня есть следующий элемент HTML

<select id="selectStates" size="5" multiple="multiple" class="box">
    <option value="tx">Texas</option>
    <option value="ak">Alaska</option>
    <option value="ca">California</option>
    <option value="ws">Washington</option>
    <option value="tn">Tennessee</option>
</select>

И у меня есть <map>.Он имеет 50 элементов с идентификаторами для начала с A0, A1, A2 ... A50 следующим образом: (

дополнительная строка "href =" # "ords =" 51,15,52,15,52,16, 53,16, ...область на карте, когда я щелкаю это состояние в окне списка.

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

$('#selectStates').find('#tn').click(function(e){
            $('#A51').click();
            });

Но это неКажется, не работает. Может кто-нибудь, пожалуйста, помогите мне?

Answer 1

Использование find ("# tn") не будет работать.# указывает на идентификатор, но вы ищете значение.Вам необходимо найти атрибут value.

Answer 2

Вы должны проверить значение элемента select, а не элементов option.Вы также должны поместить обработчик щелчка на элемент select.Если вы этого не сделаете, код не будет работать в IE.

Я думаю, вы должны сделать карту с элементами A, а затем с состоянием, поэтому Atn, Atx и т. Д.

Затем вы можете нажать кнопку на соответствующем элементе карты, используя:

$("#selectStates").click(function() {
   $("#A" + this.value).click();
});

Попробуйте это с помощью jsFiddle

Примечание: Ниндзя Чувак указал в комментариях, что .select() в этом случае не работает, поэтому я использую .click() как в OP, так как .select() ограничено <input type="text"> полями и <textarea> полями.Событие select отправляется элементу, когда пользователь делает выделение текста внутри него.

Answer 3

Назначьте щелчок для выбора и проверьте значение.

Пример:

$("#selectStates").click (function() {
   switch (this.value) {
     case "tx":
       //do something
       break;
     case "ak":
       //do something
       break;
     case "ca":
       //do something
       break;
     case "ws":
       //do something
       break;
     case "tn":
       //do something
       break;
   }
})

Answer 4

Вы ищете что-то подобное

$(function() {
  $('#selectStates > *').click(function(e){
    alert('you clicked : ' +this.value);
  });
});

увидеть это в действии

Answer 5

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

$("#selectStates").find("[value=tn]").select(function() {
   $("#A51").click()
})

лучше, однако, это:

<select>
 <option value="tn" data-click-div="A51">TN</option>
</select>

один обработчик сейчас:

$("#selectStates").change(function(evt) {
   var obj = "#" + jQuery(this).attr("data-click-div");
   jQuery(obj).click();
});

что я сделал здесь, это добавил атрибут к опции, чтобы сказать, какой div нужно щелкнуть Тогда все сделано.

Answer 6

попробуй

$("option[value=tn]")

потому что конкретная опция, на которую вы нацеливаетесь, не имеет id="tn"