带有几个下拉菜单的html，每个都有自己的show / hide textarea

时间：2017-04-26 21:04:10

标签： javascript jquery html

我有几个下降的HTML。根据每个选择，textarea显示描述。现在我有一个节目，并在每个问题的javascript中隐藏。有没有办法简化这个，这样我就不必为每个问题编写show / hide。我的意思是，有没有办法让我的javascript更简洁？

<!DOCTYPE html>
<html>

<head>
  <meta charset="ISO-8859-1">
  <title>Food Selection</title>

  <link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
  <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
      $('#spicyFoodField').on('change', function() {
        if (this.value == 'spicyFoodDesc') {
          $("#spicyFoodDesc").show();
        } else {
          $("#spicyFoodDesc").hide();
        }
      });
    });

    $(document).ready(function() {
      $('#sweetFoodField').on('change', function() {
        if (this.value == 'sweetFoodDesc') {
          $("#sweetFoodDesc").show();
        } else {
          $("#sweetFoodDesc").hide();
        }
      });
    });

    $(document).ready(function() {
      $('#blandFoodField').on('change', function() {
        if (this.value == 'blandFoodDesc') {
          $("#blandFoodDesc").show();
        } else {
          $("#blandFoodDesc").hide();
        }
      });
    });
  </script>


</head>

<body>
  <div class="w3-row-padding" id="spicyFood">
    <div class="w3-third">
      <label class="w3-text-green" for="spicyFoodLabel"><b>Do you like spicy food?</b></label>
      <p>
        <select id="spicyFoodField">
						<option value="" disabled selected>Select...</option>
						<option value="spicyFoodDesc">Yes</option>
						<option value="no">No</option>    			    
					</select>
      </p>
    </div>

    <div class="w3-twothird">
      <p>
        <textarea class="w3-hover-light-blue" id="spicyFoodDesc" name="spicyFoodDesc" rows="2" hidden> </textarea>
      </p>
    </div>
  </div>

  <div class="w3-row-padding" id="sweetFood">
    <div class="w3-third">
      <label class="w3-text-green" for="spicyFoodLabel"><b>Do you like sweet food?</b></label>
      <p>
        <select id="sweetFoodField">
						<option value="" disabled selected>Select...</option>
						<option value="sweetFoodDesc">Yes</option>
						<option value="no">No</option>    			    
					</select>
      </p>
    </div>

    <div class="w3-twothird">
      <p>
        <textarea class="w3-hover-light-blue" id="sweetFoodDesc" name="sweetFoodDesc" rows="2" hidden> </textarea>
      </p>
    </div>
  </div>

  <div class="w3-row-padding" id="sweetFood">
    <div class="w3-third">
      <label class="w3-text-green" for="blandFoodLabel"><b>Do you like sweet food?</b></label>
      <p>
        <select id="blandFoodField">
						<option value="" disabled selected>Select...</option>
						<option value="blandFoodDesc">Yes</option>
						<option value="no">No</option>    			    
					</select>
      </p>
    </div>

    <div class="w3-twothird">
      <p>
        <textarea class="w3-hover-light-blue" id="blandFoodDesc" name="blandFoodDesc" rows="2" hidden> </textarea>
      </p>
    </div>
  </div>


</body>

</html>

1 个答案:

答案 0 :(得分：1)

肯定有一种方法可以实现您的目标，我的首选是使用一个事件监听器和data属性的组合。

这个想法是你应用一个事件来触发任何选择的更改，而不是每个事件都有一个。 

$("select").on("change", ...);

要准确找出哪个更改了，您可以使用$(this)。因此，$(this).val()会告诉我们下拉列表是否切换为“是”或“否”。

var selectedValue = $(this).val();

我们可以为每个描述添加参数data-for-id，并将其设置为关联选择的ID。例如，如果您的ID为mySelect，则textarea将为data-for-id="mySelect"。

<select id="spicyFoodField">
    ....                
</select>

<textarea data-for-id="spicyFoodField" />

现在我们在select和它的textarea之间创建了一个链接。让我们在jQuery代码中实现它，这样当select更改时，它知道要查找的textarea：

//Set the associated text area to whatever textarea has 
//the same data-for-id as the changing select list
var $associatedTextarea = $("textarea[data-for-id=" + $(this).attr("id") + "]");

最后，我们可以实现我们的逻辑来隐藏区域，或显示区域：

if (selectedValue == "yes") {
  $associatedTextarea.show();
} else {
  $associatedTextarea.hide();
}

现在，每当我们想要添加一个新的Select / Textarea时，我们所要做的就是将data-for-id="associated-select-id"放在textarea上，代码将处理其余部分。

完整示例： 

$(document).ready(function() {            
    $("select").on("change", function() {      //When a select changes
        var selectedValue = $(this).val();     //Check its new value

        //Get associated textarea
        var $associatedTextarea = $("textarea[data-for-id=" + $(this).attr("id") + "]"); 
        if (selectedValue == "yes") {
            $associatedTextarea.show();
        } else {
            $associatedTextarea.hide();
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>


<div class="w3-row-padding" id="spicyFood">
<div class="w3-third">
    <label class="w3-text-green" for="spicyFoodLabel"><b>Do you like spicy food?</b></label>
    <p>
        <select id="spicyFoodField">
            <option value="" disabled selected>Select...</option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
        </select>
    </p>
</div>

<div class="w3-twothird">
    <p>
        <textarea class="w3-hover-light-blue" data-for-id="spicyFoodField" id="spicyFoodDesc" name="spicyFoodDesc" rows="2" hidden> </textarea>
    </p>
</div>
</div>

<div class="w3-row-padding" id="sweetFood">
<div class="w3-third">
    <label class="w3-text-green" for="spicyFoodLabel"><b>Do you like sweet food?</b></label>
    <p>
        <select id="sweetFoodField">
            <option value="" disabled selected>Select...</option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
        </select>
    </p>
</div>

<div class="w3-twothird">
    <p>
        <textarea class="w3-hover-light-blue" data-for-id="sweetFoodField" id="sweetFoodDesc" name="sweetFoodDesc" rows="2" hidden> </textarea>
    </p>
</div>
</div>

<div class="w3-row-padding" id="sweetFood">
<div class="w3-third">
    <label class="w3-text-green" for="blandFoodLabel"><b>Do you like sweet food?</b></label>
    <p>
        <select id="blandFoodField">
            <option value="" disabled selected>Select...</option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
        </select>
    </p>
</div>

<div class="w3-twothird">
    <p>
        <textarea class="w3-hover-light-blue" data-for-id="blandFoodField" id="blandFoodDesc" name="blandFoodDesc" rows="2" hidden> </textarea>
    </p>
</div>
</div>

相关问题
最新问题