HTML带有几个下拉折叠，每个下拉菜都有自己的表演/隐藏textarea

我的html带有几个下拉折叠。根据每种选择，文本方面显示用于描述。现在，我有一个节目并隐藏在JavaScript中。有没有办法简化这一点，这样我就不必为每个问题写下表演/隐藏。我的意思是，我的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>

肯定有一种实现自己追求的方法，我的偏爱是使用一个事件侦听器和 data属性的组合。bk_hr>

这个想法是，您应用了一个在任何选择的更改中启动的事件，而不是为每个。

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

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

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

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

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

现在，我们已经在Select和它的Textarea之间创建了一个链接。让我们在我们的jQuery代码中实现它，以便当选择更改时，它知道要查找的文本方面：

//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();
}

现在，每当我们要添加新的选择/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>

相关内容

最新更新

热门标签：