Question

我正在尝试使用位于表单标签之外的select元素。 HTML5允许<select form="myform" name="myselect">

以下所有示例均适用，如果我将选择移入表单标记之间，但这会违背'form ='属性的目的。

我也不想在选择字段中使用id =，因为我将在同一页面上使用多种形式。

谢谢。

$('#mybutton').click(function () {
  alert("1: " + $('#myform select[name="myselect"]').val());
  
  myform = $('#myform');
  alert("2: " + myform.find('select[name="myselect"]').val());  

  alert("3: " + $('#myform select').val());
  
  myform = $('#myform');
  alert("4: " + myform.find('select').val());

  // works
  alert("5: " + $('select[form="myform"][name="myselect"]').val());

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
  <form id="myform">
    <input type="hidden" name="myhidden" value="2" />
    <input id="mybutton" type="button" name="Go" value="Go" />
 
  </form>
   
  <select form="myform" name="myselect">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
  </select>  
</div>

Answer 1

您不能通过以下方式选择下拉菜单：

$('#myform select[name="myselect"]').val();

因为在DOM中ID为myselect的元素中没有名称为myform的子元素。

您必须使用

$('select[name="myselect"]').val();

Answer 2

您可以使用class：

$('#mybutton').click(function () {
  
  $( ".sel" ).each(function ( index ) {
     alert( index + " number of select box value : " + $( this ).val() );
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
  <form id="myform">
    <input type="hidden" name="myhidden" value="2" />
    <input id="mybutton" type="button" name="Go" value="Go" />
 
  </form>
   
  <select class="sel" form="myform" name="myselect">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
  </select>  
</div>

现在您可以在同一个类中进行多个选择并对其进行迭代。

如何访问输入值或在表单标签之外进行选择

2 个答案: