Question

我是jQuery和javascript的新手。我一直试图制作一个简单的应用程序，并且在获取用户输入的数据时遇到很多麻烦。我有两个下拉列表，我只想从每个列表中获取输入。似乎我只能得到一个或另一个。我显然错过了一些东西。

<code> 
<!DOCTYPE html>
<html>
<head>
<title>Headers and Footers</title>
<!-- the three things that jQuery Mobile needs to work -->
<link rel="stylesheet" href="../jquery.mobile-1.4.2/jquery.mobile-1.4.2.css" />
<script src="../jquery-1.11.0.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.4.2/jquery.mobile-1.4.2.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width"/>

</head>
<body>

  <!-- This is the first page -->
<section id="firstpage" data-role="page" data-position="fixed">
    <div data-role="header" data-theme="b">
         <h1 style="text-align:left; margin-left:20px;">Converter</h1>
        <a href="#" data-icon="gear" class="ui-btn-right">Options</a>
    </div>
    <div class="ui-content">
        <label for="dose-input" id="dose-input2">Enter Dose of starting Drug</label>
        <input type="number" step="0.01" min="0" placeholder="Enter Starting Drug">

        <form>
<div class="ui-field-contain">
<label for="select-native-1">Choose starting Drug:</label>
<select name="select-native-1" id="select-native-1" data-native-menu="false">
    <option>Choose Starting...</option>
    <option value="1">Drug 1</option>
    <option value="2">Drug 2</option>
    <option value="3">Drug 3</option>
    <option value="4">Drug 4</option>
    <option value="5">Drug 5</option>
    <option value="6">Drug 6</option>
</select>

</div>
</form>

<div class="ui-field-contain">
<label for="select-end">Choose ending Drug:</label>
<select name="select-end" id="select-end" data-native-menu="false">
    <option>Choose ending...</option>
    <option value="1">Drug 1 </option>
    <option value="2">Drug 2</option>
    <option value="3">Drug 3</option>
    <option value="4">Drug 4</option>
    <option value="5">Drug 5</option>
    <option value="6">Drug 6</option>
</select>
</div>


<fieldset class="ui-grid-a">
<div class="Clear"><button type="button" id="clear" data-theme="c">Clear</button></div>
<div class="Submit"><button type="button" id="submit" data-theme="b">Submit</button></div>   
</fieldset>

<script>
  $('#submit').click(function() {


 $( "input" )
.keyup(function() {
 var value = $( this ).val();
 $( "p" ).text( value );
  alert(value);
})
  .keyup();
  var selected_end = $('#select-end').val();
  alert(selected_end);
  var starting_drug = $('#select-native-1"').val();
  alert(starting_drug);

}); 

</script>


 </div>


</section>
</body>
</html>  </code>

如果我这样设定，我只会得到输入剂量的值和药物结束的选项。我无法获得药物开始时的选择权。我有什么想法吗？

Answer 1

您的脚本非常令人困惑...要在提交时从选择菜单中获取值，请执行以下操作：

$(document).on("click", "#submit", function(event)
{
    var dose = $("#dose-input").val();
    var drug_start = $("#select-start").val();
    var drug_end = $("#select-end").val();
    alert(dose + "\n" + drug_start + "\n" + drug_end);
});

请务必检查提交时的默认值。查看完整的 JSFiddle

jQuery Mobile从多个下拉列表中获取数据的麻烦

1 个答案: