17

私はこれが簡単であることを知っています、そして私はグーグルで検索する必要があります。私は最善を尽くしましたが、より良い解決策を見つけることができませんでした。いくつかの入力を受け取るフォームフィールドと、いくつかの値を持つ選択フィールドがあります。「その他」の値もあります。

私が欲しいのは：

ユーザーが「その他」オプションを選択すると、「その他」を指定するテキストフィールドが表示されます。ユーザーが（「その他」以外の）別のオプションを選択したときに、もう一度非表示にします。JQueryを使用してそれを実行するにはどうすればよいですか？

これは私のJSPコードです

<label for="db">Choose type</label>
<select name="dbType" id=dbType">
   <option>Choose Database Type</option>
   <option value="oracle">Oracle</option>
   <option value="mssql">MS SQL</option>
   <option value="mysql">MySQL</option>
   <option value="other">Other</option>
</select>

<div id="otherType" style="display:none;">
  <label for="specify">Specify</label>
  <input type="text" name="specify" placeholder="Specify Databse Type"/>
</div>

ここで、ユーザーが[その他]を選択した場合にのみ、DIVタグ**（id = "otherType"）**を表示したいと思います。JQueryを試してみたいです。これは私が試したコードです

<script type="text/javascript"
    src="jquery-ui-1.10.0/tests/jquery-1.9.0.js"></script>
<script src="jquery-ui-1.10.0/ui/jquery-ui.js"></script>
<script>    
$('#dbType').change(function(){

   selection = $('this').value();
   switch(selection)
   {
       case 'other':
           $('#otherType').show();
           break;
       case 'default':
           $('#otherType').hide();
           break;
   }
});
</script>

しかし、私はこれを得ることができません。私は何をすべきか？ありがとう

4

6 に答える 6

44

コードにいくつか問題があります。

  1. select要素のIDにオープンクォートがないため、次のようになります。<select name="dbType" id=dbType">

する必要があります<select name="dbType" id="dbType">

  1. $('this')あるべきです$(this)：paranthesis内の引用符は必要ありません。

  2. オプションの値を取得する場合は、.value（）の代わりに.val（）を使用します

  3. uが「選択」を初期化するときは、関数の開始時にすでに実行していない限り、その前にvarを付けて実行します。

これを試して：

   $('#dbType').on('change',function(){
        if( $(this).val()==="other"){
        $("#otherType").show()
        }
        else{
        $("#otherType").hide()
        }
    });

http://jsfiddle.net/ks6cv/

スイッチで使用するための更新：

$('#dbType').on('change',function(){
     var selection = $(this).val();
    switch(selection){
    case "other":
    $("#otherType").show()
   break;
    default:
    $("#otherType").hide()
    }
});

jQueryおよびjQuery-UIのリンクを使用した更新：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>‌​
于 2013-03-22T09:43:24.723 に答える
5

JSFiddleのデモ

$(document).ready(function () {
    toggleFields(); // call this first so we start out with the correct visibility depending on the selected form values
    // this will call our toggleFields function every time the selection value of our other field changes
    $("#dbType").change(function () {
        toggleFields();
    });

});
// this toggles the visibility of other server
function toggleFields() {
    if ($("#dbType").val() === "other")
        $("#otherServer").show();
    else
        $("#otherServer").hide();
}

HTML：

    <p>Choose type</p>
    <p>Server:
        <select id="dbType" name="dbType">
          <option>Choose Database Type</option>
          <option value="oracle">Oracle</option>
          <option value="mssql">MS SQL</option>
          <option value="mysql">MySQL</option>
          <option value="other">Other</option>
        </select>
    </p>
    <div id="otherServer">
        <p>Server:
            <input type="text" name="server_name" />
        </p>
        <p>Port:
            <input type="text" name="port_no" />
        </p>
    </div>
    <p align="center">
        <input type="submit" value="Submit!" />
    </p>
于 2016-09-09T09:58:28.973 に答える
2

val()代わりに使用する必要value()があり、開始見積もりを見逃している id=dbType"必要がありますid="dbType"

ライブデモ

変化する

selection = $('this').value();

に

selection = $(this).val();

また

selection = this.value;
于 2013-03-22T09:38:26.653 に答える
1

私はその答えを得ました。これが私のコードです

<label for="db">Choose type</label>
<select name="dbType" id=dbType">
   <option>Choose Database Type</option>
   <option value="oracle">Oracle</option>
   <option value="mssql">MS SQL</option>
   <option value="mysql">MySQL</option>
   <option value="other">Other</option>
</select>

<div id="other" class="selectDBType" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Databse Type"/>
</div>

そして私のスクリプトは

$(function() {

        $('#dbType').change(function() {
            $('.selectDBType').slideUp("slow");
            $('#' + $(this).val()).slideDown("slow");
        });
    });
于 2013-03-25T10:41:02.397 に答える
1 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
function myfun(){
$(document).ready(function(){

    $("#select").click(
    function(){
    var data=$("#select").val();
        $("#disp").val(data);
                     });
});
}
</script>
</head>
<body>

<p>id <input type="text" name="user" id="disp"></p>

<select id="select" onclick="myfun()">
<option name="1"value="1">first</option>
<option name="2"value="2">second</option>
</select>

</body>
</html>
于 2018-03-16T07:00:57.220 に答える
0 
$('#dbType').change(function(){

   var selection = $(this).val();
   if(selection == 'other')
   {
      $('#otherType').show();
   }
   else
   {
      $('#otherType').hide();
   } 

});
于 2013-03-22T09:40:39.303 に答える