html with several drop downs each with its own show/hide textarea
Question
I have html with several drop downs. Depending on the each selection a textarea shows for description. Right now I have a show and hide in javascript for each question. Is there a way to concise this so that I dont have to write show/hide for each question. What I mean is, Is there a way that my javascript will be more concise?
<!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 answers
solution1
1 ACCPTED 2017-04-26 21:22:13
There is certainly a way to achieve what you're after, and my preference is to use a combination of one event listener, and data attributes.
The idea is that you apply one event that fires on the change of any select , rather than having one for each.
$("select").on("change", ...);
To find out exactly which one changed, you can use $(this) . Therefore, $(this).val() will tell us if the dropdown is switching to "yes" or "no".
var selectedValue = $(this).val();
We can add the parameter data-for-id to each description, and set it to the ID of the associated select. For example, if you have a select with an id of mySelect , the textarea would have data-for-id="mySelect" .
<select id="spicyFoodField">
....
</select>
<textarea data-for-id="spicyFoodField" />
Now we've created a link between our select and its textarea. Let's implement that in our jQuery code, so that when the select gets changed, it knows what textarea to look for:
//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") + "]");
Finally, we can implement our logic to hide the area, or show the area:
if (selectedValue == "yes") {
$associatedTextarea.show();
} else {
$associatedTextarea.hide();
}
Now, any time we want to add a new Select / Textarea, all we have to do is put data-for-id="associated-select-id" on the textarea , and the code will handle the rest.
Complete example:
$(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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.