0

これらは動的依存選択コントロールです。(1-3、4-6、7-9) の値のセットは、使用する非表示/表示 div 機能を決定します。問題は、div id に応じて非表示/表示しかできない機能です。選択ボックスにある値 (1-3、4-6、7-9) に応じて関数の非表示/表示 div を作成するにはどうすればよいですか?

Jクエリ

$('#select').change(function() {
   $('#sub1, #sub2, #sub3').hide();
   $('#sub' + $(this).find('option:selected').attr('id')).show();
});

HTML セットアップ

<html>
<select size="6" id="category">
     <option value="">categories 1-3 </option>
     <option value="">----</option>
     <option value="">----</option>
</select>

<div id="sub1" style="display:none">
<select name="subc1" size="6">
     <option value="1">subcategories 4-6</option>
     <option value="2">---</option>
     <option value="3">---</option>
</select>
</div>

<div id="sub2" style="display:none">
<select name="subc2" size="6">
      <option value="4">subcategories 7-9</option>
      <option value="5">----</option>
      <option value="6">----</option>
</select>
</div>

<div id="sub3" style="display:none">
<select name="subc3" size="6">
      <option value="7">End</option>
      <option value="8">----</option>
      <option value="9">----</option>
</select>   
</div>
</html>
4

4 に答える 4

2

ドロップダウン変更機能から値を選択し、ドロップダウンの値に応じて操作を行います。以下はサンプルコードです

$(function() // Shorthand for $(document).ready(function() {
      $('select').change(function() {
            if($(this).val() == 1)
            {
              $('#sub1').hide();
              $('#sub2').show();
            }
      });
});
于 2012-05-29T04:42:17.913 に答える
1

コードの問題は、セレクターが正しくないことです。

$('#select')...

する必要があります

$('select')...

また、この部分が間違っています

  $('#sub' + $(this).find('option:selected').attr('id')).show();

これに置き換えます 

  $('#sub' + $(this).val()).show();

最後に、技術的には違法ではありませんが、同じ名前/ID「sub1」を持つ異なる要素を持つことはおそらく悪い考えです。確かに紛らわしいです。

于 2012-05-29T04:37:50.710 に答える
1

動作デモ http://jsfiddle.net/FwBb2/1/

私はあなたの Jquery コードに小さな変更を加えただけでなく、最初の選択ドロップダウン リストに値を追加しました。

私が何かを見逃した場合はお知らせください！B-)

コード

$('select').change(function() {
   $('#sub1, #sub2, #sub3').hide();

   $('#sub' + $(this).val()).show();
});​

HTML

<html>
<select id="category">
     <option value="1">categories 1-3 </option>
     <option value="2">----</option>
     <option value="3">----</option>
</select>

<div id="sub1" style="display:none">
<select name="subc1" size="6">
     <option value="1">subcategories 4-6</option>
     <option value="2">---</option>
     <option value="3">---</option>
</select>
</div>

<div id="sub2" style="display:none">
<select name="subc2" size="6">
      <option value="4">subcategories 7-9</option>
      <option value="5">----</option>
      <option value="6">----</option>
</select>
</div>

<div id="sub3" style="display:none">
<select name="subc3" size="6">
      <option value="7">End</option>
      <option value="8">----</option>
      <option value="9">----</option>
</select>   
</div>
</html>​
于 2012-05-29T04:39:36.330 に答える
1

カテゴリのマイナーチェンジを変更する必要がありますselect

<select size="6" id="category">
     <option value="1">categories 1-3 </option>
     <option value="2">----</option>
     <option value="3">----</option>
</select>


$('select#category').on('change', function() {
  $('div[id=^sub]:visible').hide();
  $('div#sub' + this.value).show();
});

.change()の代わりに使用することもできます.on('change')。

 $('select#category').change(function() {
  $('div[id=^sub]:visible').hide();
  $('div#sub' + this.value).show();
});

ノート：

$('div[id=^sub]:visible')とで始まるすべてdivのを指します。idsubvisible

あなたはどちらである必要があるかを試して$('#select')います$('#category')または$('select#category').

あなたのコメントによると：

完全なソリューションは次のようになります。

function isOnlyDashed(text) {
    return text.replace(/-/g, '').length === 0;
}

$('select#category').change(function() {
    var text = $('option:selected', this).text();
    if (!isOnlyDashed(text)) {
        $('div[id=^sub]:visible').hide();
        $('div#sub' + this.value).show();
    }
});


$('select[name^=subc]').change(function() {
    var text = $('option:selected', this).text();
    if (!isOnlyDashed(text)) {
        $(this).parent() // jump to parent div
        .next('div[id^=sub]:hidden') // go to next hidden div
        .show();
    }
});

完全なワークアウト

于 2012-05-29T05:12:53.423 に答える