0

我试图在 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!");
    });
});

​</p>

4

7 回答 7

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");
        }
    });

});
于 2012-12-01T13:33:46.663 回答
1

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

HTML：我在 select 元素中添加了一个 id 和名为 data-alert 的自定义属性，其中包含每个选项的消息，这些选项需要在被选中时显示警报。这些属性在 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);
    });
});

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

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

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
    });
});

问题中发布的代码问题： 您发布的代码的问题是您click在选择元素的选项上使用。正如您所发现的，此事件没有为各个选项定义。

关于 UI 事件的一般要点：一般来说，最好尽可能尝试使用与设备无关的、更“语义”的事件。在这种情况下，我们使用的事件是告诉我们选择的值已更改的事件。用户是使用鼠标、键盘还是触摸都没有关系！！！

于 2012-12-01T14:04:42.227 回答
0

尝试使用以下代码。它会为你工作。

<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");
        });

    });
于 2012-12-01T13:16:19.147 回答
0

对 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);
    });
});

这将显示选定的选项。

于 2012-12-01T13:24:44.960 回答
0

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

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

于 2012-12-01T13:36:22.233 回答
0

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

向您的标记添加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

$(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/

于 2012-12-01T13:43:28.627 回答
0

要自定义警报消息，您需要在 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'));
    });
});​
于 2012-12-01T13:45:06.577 回答