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?





  
  Food Selection

  
  

  





  
    
      Do you like spicy food?
      
        
      
    

    
      
         
      
    
  

  
    
      Do you like sweet food?
      
        
      
    

    
      
         
      
    
  

  
    
      Do you like sweet food?

Tyler Roper · Accepted Answer

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".



</code></pre>

<hr>

<p>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:</p>

<pre><code>//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") + "]");
</code></pre>

<hr>

<p>Finally, we can implement our logic to hide the area, or show the area:</p>

<pre><code>if (selectedValue == "yes") {
  $associatedTextarea.show();
} else {
  $associatedTextarea.hide();
}
</code></pre>

<hr>

<p>Now, any time we want to add a new Select / Textarea, all we have to do is put <code>data-for-id="associated-select-id"</code> on the <code>textarea</code>, and the code will handle the rest.</p>

<p><strong>Complete example:</strong></p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(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();
        }
    });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><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> 
    





    Do you like sweet food?
    
        
    



    
         
    





    Do you like sweet food?

html with several drop downs each with its own show/hide textarea

Answers (1)

Related Questions