Question

这是与我的问题有关的JSFiddle。的 http://jsfiddle.net/kane/MFJUv/

我尝试过几个显示/隐藏下拉列表的内容（div id：machinedropdown）。

加载时我希望隐藏机器下拉菜单但是当用户选择需要显示的“机器”单选按钮时。谁能为我建议一个解决方案？

<div data-role="content" id="radio"
    <form>
      <fieldset data-role="controlgroup" data-type="horizontal" class="center-controlgroup">
            <input name="radio-choice-h-6" id="radio-choice-h-6a" type="radio" checked="checked" value="on">
            <label for="radio-choice-h-6a">Run</label>
            <input name="radio-choice-h-6" id="radio-choice-h-6b" type="radio" value="off">
            <label for="radio-choice-h-6b">Swim</label>

            <!-- ON SELECT I NEED TO HIDE THE "div id = "machinedropdown" -->
            <input name="radio-choice-h-6" id="radio-choice-h-6c" type="radio" value="off">
            <label for="radio-choice-h-6c">Machine</label>
         </fieldset>
</form>
</div>

<div data-role="content" id="machinedropdown"
  <label class="select" for="select-choice-1">Select, native menu</label>
        <select name="select-choice-1" id="select-choice-1">
        <option value="standard">Machine 1</option>
        <option value="rush">Machine 2</option>
        <option value="express">Machine 3</option>
        <option value="overnight">Machine 4</option>
  </select>
</div>

Answer 1

这样做的一种方法是检查是否同时检查了无线电，以及它是否包含特定于机器的ID的元素。

首先，将下拉菜单的初始状态设置为隐藏：

$('#machinedropdown').hide();

接下来，您将收听无线电输入上的更改事件 - 如果同时选中了输入且具有特定于machine输入（radio-choice-h-6c）的ID，则将下拉列表设置为显示 - 否则，将其设置为隐藏（这样当您将所选单选按钮从machine更改为另一个选项时，下拉菜单仍未显示）：

$('input').change(function(){ // On change of radio buttons
    if ($(this).is(':checked') && $(this).attr('id') == 'radio-choice-h-6c') {
      $('#machinedropdown').show();
      // If the radio button is checked and has the machine id, show the drop down.
    }
    else {
      $('#machinedropdown').hide();
      // Else, re-hide it.
    }
});

jsFiddle here.

当选择单选按钮时，如何使用jquery mobile显示div？

1 个答案: