根據所選的下拉菜單顯示HTML

Question

我有一個下拉菜單，根據所選項目，我想顯示HTML頁面的一小部分。

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

如果所選值為“abc”，則會顯示一個彈出按鈕，其中包含以下代碼：

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

否則，如果選擇的值是“xyz”，則應顯示該值。

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

我該怎么做。

Answer 1

監聽#menuHandler選擇元素的change事件，並在那里添加條件邏輯。

這里的例子

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

..或更短的版本：

這里的例子

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

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

Answer 2

嘗試這樣的事情。

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

Answer 3

從高層來看：

• 在按鈕上創建一個監聽器並監聽單擊
• 動態獲取價值
• 創建您正在查找的內容，或將內容插入動態創建的<div> （疊加，彈出等）

按照這些步驟，你應該沒問題。