Question

我正在尝试在jQuery中的下拉列表中显示一个警告对话框，但它似乎不起作用。我究竟做错了什么？我的代码在这里：http://jsfiddle.net/AyCFt/6/

HTML

<select>
  <option selected="selected">Please select your Login</option>
  <option>--------------------------</option>
  <option id="#projectmanager">Project Manager</option>
  <option id="#projectmanager2">Project Manager 2</option>
</select>

JS

$(document).ready(function() {
    $("#projectmanager").click(function(){
        alert("Hello");
    });
    $("#projectmanager 2").click(function(){
        alert("Hello to you too!");
    });
});

Answer 1

这样，您可以为每个项目管理员显示一个唯一的警告框。

<select id='ddselect'>
      <option selected="selected" >Please select your Login</option>
      <option>--------------------------</option>
      <option id="projectmanager">Project Manager</option>
      <option id="projectmanager2">Project Manager 2</option>
</select>

$(document).ready(function() {
    $("#ddselect").change(function(){
        if($("#ddselect option:selected").attr("id") == "projectmanager"){
            alert("Project manager 1 alert");
        }
        if($("#ddselect option:selected").attr("id") == "projectmanager2"){
            alert("Project manager 2 alert");
        }
    });

});

Answer 2

尝试使用以下代码。它会对你有用。

<select id='ddselect'>
          <option selected="selected" >Please select your Login</option>
          <option>--------------------------</option>
          <option id="#projectmanager">Project Manager</option>
          <option id="#projectmanager2">Project Manager 2</option>
    </select>

    $(document).ready(function() {
        $("#ddselect").change(function(){
            alert("Hello");
        });

    });

Answer 3

将以下更改改为html：

<select id="SelectOptions">
  <option selected="selected">Please select your Login</option>
  <option>--------------------------</option>
  <option id="#projectmanager">Project Manager</option>
  <option id="#projectmanager2">Project Manager 2</option>
</select>

对javascript进行以下更改：

$(document).ready(function() {
    $("#SelectOptions").change(function(){
         alert($("#SelectOptions option:selected")[0].text);
    });
});

这将显示所选选项。

Answer 4

如上所述，您可以在onchange元素上使用select。要唯一地响应每个值，您可以使用switch语句，如下所示：

http://jsfiddle.net/AyCFt/11/

Answer 5

这只是一种方法（根据你的最终实施情况，可能有更好的方法来解决这个问题。）

将value属性添加到标记中，以便消息包含在值中：

<select id="changeMe">
    <option selected="selected">Please select your Login</option>
    <option disabled="disabled">--------------------------</option>
    <option id="projectmanager" value="Hello">Project Manager</option>
    <option id="projectmanager2" value="Hello to you too">Project Manager 2</option>
</select>

由于option元素不会[经常]收到.click()个事件，所以最好将.change()处理程序添加到select元素并从那里开始：< / p>

$(document).ready(function() {
    $('select#changeMe').change(function(e) {
        var self = $(this), //cache lookup
            selected = self.children('option:selected'), //get the selected option
            i = selected.index('select#changeMe option'), //grab the index, relative to all options
            message = selected.val(); //get the message
        if (i > 1) { //ignore "Please select" and "---"
            alert(message);
        }
    });
});

更新了小提琴：http://jsfiddle.net/AyCFt/12/

Answer 6

要自定义警报消息，您需要在Javascript代码中运行'switch'语句（或类似switch的一系列'if'语句），或者将警报消息编码为HTML并访问它（示例http://jsfiddle.net/AFguq/）：

<select id="SelectOptions">
  <option selected="selected">Please select your Login</option>
  <option>--------------------------</option>
  <option id="#projectmanager" alertText="Hello">Project Manager</option>
  <option id="#projectmanager2" alertText="Hello to you too">Project Manager 2</option>
</select>

（JavaScript的：）

$(document).ready(function() {
    $("#SelectOptions").change(function(){
         alert($("#SelectOptions option:selected").attr('alertText'));
    });
});

Answer 7

这是一种优雅且灵活的方式：http://jsfiddle.net/AyCFt/13/ jsFiddle只是解决了问题（显示警报）。下面的代码显示代码更灵活，但如果不需要，则避免使用其他答案的if / switch语句。

HTML ：我在select元素和自定义attributesnamed data-alert中添加了一个id，其中包含每个需要在被选中时显示警报的选项的消息。这些属性在HTML5和转发版中都有效，但它们在早期的HTML版本中也可以正常工作：

<select id="selectAlert">
  <option selected="selected">Please select your Login</option>
  <option>--------------------------</option>
  <option id="#projectmanager" data-alert="Hello">Project Manager</option>
  <option id="#projectmanager2" data-alert="Hello to you too">Project Manager 2</option>ello
</select>

Javascript（版本1）：如果您只是想要提醒并且是简洁和干净代码的粉丝：

$(function() {
    $("#selectAlert").change(function(){
        var alertMsg = $(this).find(":selected").attr("data-alert");
        if(alertMsg) alert(alertMsg);
    });
});

请注意，此解决方案不会强制您显示文本或选项的值。您可以根据需要自由选择任何警报消息。

为什么这样做？这种解决方案将逻辑与数据分离。因此，如果您使用服务器端代码（作为动态生成的页面的一部分或通过AJAX）生成select，那么理想情况下，如果可以避免，则不希望以相同的方式生成Javascript。虽然您的代码和其他解决方案中的代码会将警报消息放入Javascript代码中，但此解决方案会将它们放在HTML中的每个option内。

Javascript（第2版）：如果您还需要做更多事情：

$(document).ready(function() {
    $("#selectAlert").change(function(){
        var $selected = $(this).find(":selected"); //faster than $("#selectAlert :selected") as it only searches among the options in the select and not the whole DOM like another answer's solution
        //some code: you can do what you want with $selected here get it's value, its id, etc etc
        var alertMsg = $selected.attr("data-alert")
        if(alertMsg) alert(alertMsg);
        //some more code here
    });
});

在问题中张贴代码的问题： 您发布的代码的问题在于您在select元素的选项上使用click。如您所发现，未针对各个选项定义此事件。

关于UI活动的一般要点：一般情况下，最好尽可能尝试使用与设备无关的更多“语义”事件。在这种情况下，我们使用的事件是告诉我们select的值已经改变的事件。如果用户使用鼠标，键盘或触摸!!!这无关紧要

在jQuery中的下拉列表中显示警告对话框

7 个答案: