12

値が「all」と「custom」の選択リストがあります。select with value'custom'では、クラス'resources'のdivが表示され、値が'all'の場合は非表示になります。

フォームは次のとおりです。

<div>
    <label>Privileges:</label>
    <select name="privileges" id="privileges" class="" onclick="craateUserJsObject.ShowPrivileges();">
        <option id="all" value="all">All</option>
        <option id="custom" value="custom">Custom</option>
    </select>
</div>
<div class="resources" style=" display: none;">resources</div>

そして、このためのjavascriptは次のとおりです。

ShowPrivileges: function() {
    var Privileges = jQuery('#privileges');
    var select = this.value;
    Privileges.change(function() {
        if (select === 'custom') {
            $('.resources').show();
        }
    });
}

これが機能するためにはどのように見えるべきですか？申し訳ありませんが、これは単純なはずですが、私はこれらすべてに慣れていません。

4

7 に答える 7

13

valメソッドを使用する必要があります。

var Privileges = jQuery('#privileges');
var select = this.value;
Privileges.change(function () {
    if ($(this).val() == 'custom') {
        $('.resources').show();
    }
    else $('.resources').hide(); // hide div if value is not "custom"
});

http://jsfiddle.net/RWUdb/

于 2013-03-26T19:27:31.157 に答える
1 
Privileges.on('change',function(){
    if($(this).val()=='custom'){
        $('.resources').show();
    }else{
        $('.resources').hide();
    }
})
于 2013-03-26T19:25:05.880 に答える
1

onClickを削除し、オプションからIDを削除することで、HTMLをクリーンアップできます。

HTML：

<div>
    <label>Privileges:</label>
    <select name="privileges" id="privileges">
        <option value="all">All</option>
        <option value="custom">Custom</option>
    </select>
</div>
<div class="resources" style=" display: none;">resources</div>

そしてあなたのJavaScriptはこれを簡単に行うことができます：

$('#privileges').on('change', function() {
        if($(this).val() === 'all') {
            $('.resources').hide();
        } else {
            $('.resources').show();
        }
 });
于 2013-03-26T19:30:39.487 に答える
0

イベントハンドラーを追加する必要があります。

$("#privileges").change(craateUserJsObject.ShowPrivileges);

次に、ShowPrivileges機能内で：

var val = $("#privileges").val();
if(val == "whatever")
    //do something
else
    //do something
于 2013-03-26T19:27:01.880 に答える
0 
  $("#privileges").change(function(){
     var select=  $(this).val();
       if(select=='custom'){
          //some code
         }
    });

また

  var select=$('#privileges :selected').val()
    if(select=='custom'){
    //some code
  }
于 2013-03-26T19:27:24.920 に答える
0

あなたはこれを複雑にしすぎています：

まず、インラインをドロップしますonclick。jQueryを使用しているため、ハンドラーを動的にアタッチします。

<div>
    <label>Privileges:</label>
    <select name="privileges" id="privileges">
        <option id="all" value="all">All</option>
        <option id="custom" value="custom">Custom</option>
    </select>
</div>
<div class="resources" style=" display: none;">resources</div>

次に、クリックをリッスンしてからchangeハンドラーをアタッチしないでください。直接取り付けます

<script>
jQuery('#privileges').on('change',function(){
    if(jQuery(this).val()=='custom'){
        jQuery('.resources').show();
    } else {
        jQuery('.resources').hide();
    }
});
</script>
于 2013-03-26T19:28:06.220 に答える
0

これは、`toggle（）`を省略形として使用して行うことができます。

$('#privileges').change(function() {
  $('.resources').toggle($(this).val() == 'custom');
});

ページの読み込みで表示を切り替えたい場合はchange()、次のような同じイベントをトリガーできます。

$('#privileges').change(function() {
  $('.resources').toggle($(this).val() == 'custom');
}).change();


$('#privileges').change(function() {
  $('.resources').toggle($(this).val() == 'custom');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label>Privileges:</label>
  <select name="privileges" id="privileges">
    <option id="all" value="all">All</option>
    <option id="custom" value="custom">Custom</option>
  </select>
</div>
<div class="resources" style=" display: none;">resources</div>

于 2019-04-01T16:12:15.347 に答える