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个带ID的元素，从A0，A1，A2 ... A50开始如下：（

额外的行“href =”＃“coords =”51,15,52,15,52,16,53,16，。。 “/＆gt;

我已经在js文件中有click事件，当我点击它时突出显示状态。

现在，我想在列表框中单击该状态时突出显示地图中的特定状态区域。

正确的尝试通过将该状态的click事件分配给

中的特定事件来执行以下操作

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

但这似乎不起作用。有人可以帮帮我吗？

Answer 1

使用find（“＃tn”）将无效。 #表示ID，但您正在搜索值。您需要搜索属性value。

Answer 2

将点击分配给选择并检查是否值。

示例：

$("#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 3

您必须检查select元素的值，而不是option元素的值。您还应该将点击处理程序放在select元素上。如果您不这样做，代码将无法在IE中使用。

我认为你应该制作一个包含元素A和状态的地图，所以Atn，Atx等等。

然后，您可以使用以下方法点击相应的地图元素：

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

Try it out with this jsFiddle

注意：Ninja Dude在评论中指出 .select() 在这种情况下不起作用，所以我在OP中使用 .click() ，因为 .select() 仅限于<input type="text">字段和<textarea>框。当用户在其中进行文本选择时，select事件将发送到元素。

Answer 4

尝试

$("option[value=tn]")

因为您定位的特定选项没有id="tn"

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

你在寻找像这样的东西

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

将click（）分配给jquery中的子控件

6 个答案:

Try it out with this jsFiddle

see it in Action