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

これを行うためのエレガントで柔軟な方法： 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のそれぞれの中に入れます。

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は、select要素のオプションを使用していたことでした。ご存知のとおり、このイベントは個々のオプションに対して定義されていません。

UIイベントに関する一般的なポイント：一般に、デバイスに依存しない、より「セマンティックな」イベントを可能な限り処理することをお勧めします。この場合、使用しているイベントは、selectの値が変更されたことを通知するイベントです。ユーザーがマウス、キーボード、またはタッチを使用してそうしたかどうかは関係ありません!!!

于 2012-12-01T14:04:42.227 に答える
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 に答える
0

これはそれを行うための1つの方法にすぎません（そして、最終的な実装によっては、おそらくこれを実行するためのより良い方法があります）。

メッセージが値に含まれるように、マークアップに属性を追加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 に答える
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

上記のようonchangeに、select要素で使用できます。各値に一意に応答するには、次のswitchようなステートメントを使用できます。

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

于 2012-12-01T13:36:22.233 に答える
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 に答える