5

1つのフォームの選択に基づいてさまざまなフォームを表示/非表示にする方法を知りたいです。

以下のサンプルコードでは、3つのフォームすべてが自動的にdisplay：noneに設定されています。対応する値が「シャワー」フォームから選択されている場合、「非表示」フォームの1つのみを表示したいと思います。したがって、「シャワー」フォームからオプション「フォーム1」が選択されている場合は、以下にフォーム1を表示します。「シャワー」フォームからオプション「フォーム2」が選択されている場合は、フォーム2を表示します。等々。

できれば、フェードイン/フェードアウトアニメーションまたは別のライトアニメーションを使用します。

これがサンプルです...

<form id="form-shower">
<select>
<option value="" selected="selected"></option>
<option value="form_name1">Form 1</option>
<option value="form_name2">Form 2</option>
<option value="form_name3">Form 3</option>
</select>
</form>

<form name="form_name1" id="form_1" style="display:none">
<!---- THIS IS FORM 1---->
</form>

<form name="form_name2" id="form_2" style="display:none">
<!---- THIS IS FORM 2---->
</form>

<form name="form_name3" id="form_3" style="display:none">
<!---- THIS IS FORM 3---->
</form>

これについて助けてくれてありがとう。

4

8 に答える 8

9

jQueryを使用してそれを支援することができます： 

<form id="form-shower">
<select id="myselect">
<option value="" selected="selected"></option>
<option value="form_name1">Form 1</option>
<option value="form_name2">Form 2</option>
<option value="form_name3">Form 3</option>
</select>
</form>

<form name="form_name1" id="form_name1" style="display:none">
<!---- THIS IS FORM 1---->
</form>

<form name="form_name2" id="form_name2" style="display:none">
<!---- THIS IS FORM 2---->
</form>

<form name="form_name3" id="form_name3" style="display:none">
<!---- THIS IS FORM 3---->
</form>
<script>
$("#myselect").on("change", function() {
    $("#" + $(this).val()).show().siblings().hide();
})
</script>

選択にIDを追加し、3つのフォームのID名を変更しました:)

それが役に立てば幸い ：）

于 2012-08-14T20:10:17.397 に答える
1

これをHTMLの最後に追加するだけです

    <script type="text/javascript">
    $('select').change(function(e){
            $this = $(e.target);
            var selected_form = $this.text().replace(' ','_name');
            $('form').hide(2000, 'easeOutExpo');
            $(selected_form).show(2000, 'easeOutExpo');
        });
    </script>
于 2012-08-14T20:15:51.563 に答える
1 
<select>
    <option value="" selected="selected"></option>
    <option value="form_1">Form 1</option>
    <option value="form_2">Form 2</option>
    <option value="form_3">Form 3</option>
</select>

<form name="form_1" id="form_1" style="display:none">
<input type="text" value="1">
</form>

<form name="form_2" id="form_2" style="display:none">
<input type="text" value="2">
</form>

<form name="form_3" id="form_3" style="display:none">
<input type="text" value="3">
</form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

JS：

$("select").on("change", function() {
    $("#" + $(this).val()).show().siblings().hide();
});​

http://jsfiddle.net/dfYAs/のサンプル

于 2012-08-14T20:20:24.003 に答える
1

jQueryを使用したくない場合は、これをHTMLの先頭に追加できます。

<script>
function changeForm(form) {
  for (var i=0; i<form.length; i++){
    var form_op = form.options[i].value;
    if (form_op == form.value) {
      document.getElementsByName(form_op)[0].style.display = "block";
    }
    else {
      document.getElementsByName(form_op)[0].style.display = "none";
    }
   }
  }
</script>

onChange="changeForm(this)"次に、メインフォームに追加します。//onChangeでは大文字と小文字は区別されません。

于 2012-08-14T20:20:33.563 に答える
0

これ作って

  1. このような作業でuを支援する関数javascriptを作成します
    function FFF(){
        var opc = document.getElementById("form-shower").value;
        switch(opc)
        {
            'form_name1':
                document.getElementById('form_1').style.display = "block"; // or inline or none whatever
                break;

        }
    }
  1. イベントを作成する
<select id='id_selec' onChange='javascript:FFF();'>
于 2012-08-14T20:13:38.377 に答える
0

将来の読者のために、この設定では、外部ライブラリを使用せずにこれらのフォームを動的に表示/非表示にします。

function changeOptions(selectEl) {
  let selectedValue = selectEl.options[selectEl.selectedIndex].value;
  let subForms = document.getElementsByClassName('className')
  for (let i = 0; i < subForms.length; i += 1) {
    if (selectedValue === subForms[i].name) {
      subForms[i].setAttribute('style', 'display:block')
    } else {
      subForms[i].setAttribute('style', 'display:none') 
    }
  }
}

次に、html：

<select onchange="changeOptions(this)">
  <option value="" selected="selected"></option>
  <option value="form_1">Form 1</option>
  <option value="form_2">Form 2</option>
  <option value="form_3">Form 3</option>
</select>

<form class="className" name="form_1" id="form_1" style="display:none">
  <!---- THIS IS FORM 1---->
</form>

<form class="className" name="form_2" id="form_2" style="display:none">
  <!---- THIS IS FORM 2---->
</form>

<form class="className" name="form_3" id="form_3" style="display:none">
  <!---- THIS IS FORM 3---->
</form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
于 2017-03-26T00:56:37.713 に答える
0 

$(document).ready(function() {
  $("select").change(function() {
    $(this).find("option:selected").each(function() {
      var optionValue = $(this).attr("value");
      if (optionValue) {
        $(".box").not("." + optionValue).hide();
        $("." + optionValue).show();
      } else {
        $(".box").hide();
      }
    });
  }).change();
});
.box {
  color: #fff;
  padding: 20px;
  display: none;
  margin-top: 20px;
}

.red {
  background: #ff0000;
}

.green {
  background: #228B22;
}

.blue {
  background: #0000ff;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>jQuery Show Hide Elements Using Select Box</title>

  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>

<body>
  <div>
    <select>
      <option>Choose Color</option>
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
    </select>
  </div>
  <div id="check" class="red box">You have selected <strong>red option</strong> so i am here</div>
  <div id="check" class=" box">You have selected <strong>green option</strong> so i am here</div>
  <div id="check" class="box">You have selected <strong>blue option</strong> so i am here</div>
</body>

</html>

于 2020-06-14T19:23:11.167 に答える
0 

$(document).ready(function() {
  $("select").change(function() {
    $(this).find("option:selected").each(function() {
      var optionValue = $(this).attr("value");
      if (optionValue) {
        $(".box").not("." + optionValue).hide();
        $("." + optionValue).show();
      } else {
        $(".box").hide();
      }
    });
  }).change();
});
.box {
  color: #fff;
  padding: 20px;
  display: none;
  margin-top: 20px;
}

.red {
  background: #ff0000;
}

.green {
  background: #228B22;
}

.blue {
  background: #0000FF;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>jQuery Show Hide Elements Using Select Box</title>

  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>

<body>
  <div>
    <select>
      <option>Choose Color</option>
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
    </select>
  </div>
  <div id="check" class="red box">You have selected <strong>red option</strong> so i am here</div>
  <div id="check" class="green box">You have selected <strong>green option</strong> so i am here</div>
  <div id="check" class="blue box">You have selected <strong>blue option</strong> so i am here</div>
</body>

</html>

于 2021-10-08T13:41:28.057 に答える