1

2 つのオプションを含む 1 つの選択ボックスがあります。オプションに応じて、異なるチェックボックスのセットを表示する必要があります。ユーザーが選択したものに応じて、チェックボックスのセットまたは別のセットが表示されます。

ここで私はここに例を作りました:

http://jsbin.com/acOXisI/20/edit

セレクターで選択したオプションを取得するにはどうすればよいですか? その後、どうすればチェックボックスのフィールドセットを表示したり、表示したりできますか?

どうもありがとうございました！

4

7 に答える 7

1

jQueryを使用する必要があります：

$().ready(function(){
  $('#selector').change(function(){
    value=$(this).find(":selected").text();
    console.log(value)
    if (value == 'Option 1'){
       $('.otion1').show()
       $('.otion2').hide()
    }
    else{
       $('.otion1').hide()
       $('.otion2').show()
    }
  })
})

あなたのビンが複製され、機能しています：

http://jsbin.com/UcaWUCA/1/edit

于 2013-11-15T10:44:53.560 に答える
1

まず、ページに重複する ID を設定しないでください。

また、すべてのチェックボックスに一意の入力名を付け、常に単一のフォームからすべてを送信することをお勧めします (不要なものは無視してください)。必要な機能は多くの方法で実現できます。そのうちの 1 つは、両方のフィールドセットを非表示にし、select 要素にリスナーを設定することです。onchange イベントを使用して、どちらが選択されているかを確認し、それに応じて適切なフィールドセットを表示できます。

送信されたデータを確認するときは、最初に選択値を確認し、次に適切なチェックボックスのみを確認します。

于 2013-11-15T10:41:52.620 に答える
1

これは jQuery で行うことができます。非表示のフィールドは引き続き送信されるため、無効にする必要があることに注意してください。

$(function(){
  $("#selector").on("change", function(){
      $(".otion1, .otion2").hide().find("input").attr("disabled","disabled");
      $("."+$(this).val()).show().find("input").removeAttr("disabled");
  });
  $("#selector").trigger("change");//run on load      
});

http://jsbin.com/aVihIJOr/1/edit

于 2013-11-15T10:54:53.690 に答える
1

必要な JavaScript は次のとおりです。

// hide the fieldsets on page load
$(".otion1, .otion2").hide();



$("select").change(function() {
  var $this = $(this);

  if($this.val() === "1") {
    $(".otion1").show();
    $(".otion2").hide();
  } else if($this.val() === "2") {
    $(".otion1").hide();
    $(".otion2").show();
  } else {
    $(".otion1, .otion2").hide();
  }

});


// prevent hidden checkboxes from being submitted
$("form").submit(function() {
  $(this).find("input[type='checkbox']").filter(":hidden").each(function() {
    this.checked = false;
  });
});

選択オプションにいくつかの値を追加します。

<option value="1">Option 1</option>
<option value="2">Option 2</option>

編集されたデモを参照してください: http://jsbin.com/acOXisI/23/edit

于 2013-11-15T10:41:22.053 に答える
1

試す：

jQuery("#selector option:selected").val();

または、オプションのテキストを取得するには、次を使用しますtext()。

jQuery("#selector option:selected").text();

より詳しい情報：

于 2013-11-15T10:41:31.380 に答える
0

オプション セットに一意の Div ID を追加し、それらを選択した正確な値にリンクしました。

例: http://jsbin.com/acOXisI/18/edit

$(document).ready(function(){
  $('#selector').change(function(){
    value=$(this).find(":selected").val();
    if (value == 'option1'){
       $('#option1').show();
       $('#option2').hide();
    }
    else if(value == 'option2'){
      $('#option1').hide();
       $('#option2').show();
    }else{
      $('#option1').show();
       $('#option2').show();
    }
  });
});
于 2013-11-15T10:52:47.413 に答える