根据所选的下拉菜单显示HTML

Question

I have a dropdown menu and on the basis of the item selected I want to display a small part of HTML page.

<select id='menuHandler'>
     <option value='abc'> abc</option>
     <option value='xyz'>xyz</option>
</select>

IF the selected value is "abc" then a popup button is displayed with the following code:

<button id='runForm' onClick=""> Run form </button>
<div id ="runFormPopup" style=" display:none;">
    <table   CELLPADDING="10" CELLSPACING="5" class='border'>
        <tr>
            <td colspan='3'>Run form Generation</td>
        </tr>
        <tr>
            <td width="200" class='border'>
                <span>Input Data</span><br>
                <input type="checkbox" name="vehicle" >Process log(s)<br>
                Summary data<br>
                <input type="checkbox" name="vehicle" >Thickness data<br>
                <input type="checkbox" name="vehicle" >Particle data
            </td>
            <td class='border'>
                <span>Steps(s)</span>
                <input type="checkbox" > 
                <input type="checkbox" > 
                <input type="checkbox" > 
            </td>
        </tr>
        <tr>
            <td>   Run form filename </td>
            <td><input type="text" ></td>
            <td><button class="editbtn">Generate</button></td>
        </tr>
    </table>
</div>

else if the value selected is "xyz" this should be displayed.

<form action="${ctx}/home/step50/generateReport" method="GET" id="form_generate">
    <input style="margin-top: 20px;" type="submit" id="btnGenerate" class="small button active"  value="Generate"/>                                                    
</form>

how can I do it.

Answer 1

Listen to the change event of the #menuHandler select element, and add the conditional logic there.

Example Here

$('#menuHandler').on('change', function () {
  if (this.value === "abc") {
    $('#runFormPopup, #runForm').show();
    $('#form_generate').hide();
  } else {
    $('#runFormPopup, #runForm').hide();
    $('#form_generate').show();
  }
});

..or a shorter version:

Example Here

$('#menuHandler').on('change', function () {
  var condition = this.value === "abc";

  $('#runFormPopup, #runForm').toggle(condition);
  $('#form_generate').toggle(!condition);
});

Answer 2

Try something like this.

$('#menuHandler').change(function(){
    var selectedValue = $(this).val();
    if(selectedValue === 'abc') { 
        $('#runFormPopup').show(); 
        $('#form_generate').hide();
    }
    else { 
        $('#runFormPopup').hide(); 
        $('#form_generate').show();
    }
});

Answer 3

From a high-level perspective:

• Create a listener on the button and listen for a click
• Dynamically get the value
• Either create the content for which you are looking, or insert content into a dynamically-created <div> (overlay, pop-up, etc.)

Following these steps, you should be OK.