Question

我有一个下拉菜单，根据所选项目，我想显示HTML页面的一小部分。

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

如果所选值为＆＃34; abc＆＃34;然后会显示一个弹出按钮，其中包含以下代码：

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

否则，如果选择的值为＆＃34; xyz＆＃34;这应该显示出来。

<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

收听change select元素的#menuHandler事件，并在那里添加条件逻辑。

Example Here

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

..或更短的版本：

Example Here

$('#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>（叠加层，弹出窗口等）

按照这些步骤，您应该没问题。

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

3 个答案: