Question

我正在尝试找到动态创建的表单，无论出于何种原因，它都不提供选择列表的选项，只提供无线电和检查输入。我没办法进入并更改代码，所以我很好奇是否有办法将单选按钮列表转换为使用jquery的选择下拉列表？

例如，如果我有这段代码：

<form>
   <div class="col-lg-5">     
      <p class="bullet"><b><font class="required" size="3" color="FF0000">*     </font></b></p>
      <p class="inputLabel">First Name:</p>
      <input type="text" size="25" name="Text1" value="">
   </div>
   <div class="col-lg-5">
      <input type="radio" name="gender" value="male">Male<br>
      <input type="radio" name="gender" value="female">Female
   </div>
   <div class="col-lg-10"><p>Current Employer / Facility:</p>
      <input type="text" size="25" name="Text9" value="">
   </div>
</form>

无论如何都要改为：

<form>
    <div class="col-lg-5">     
      <p class="bullet"><b><font class="required" size="3" color="FF0000">*     </font></b></p>
      <p class="inputLabel">First Name:</p>
      <input type="text" size="25" name="Text1" value="">
   </div>
    <select name="gender">
       <option value ="male">Male</option>
       <option value ="female">Female</option>
    </select>
   <div class="col-lg-10"><p>Current Employer / Facility:</p>
      <input type="text" size="25" name="Text9" value="">
   </div>
</form>

Answer 1

这是一种方式：

var sel = $('<select name="gender">').append(function () {
    var opts='';
    $('input[name="gender"]').each(function () {
        opts += '<option value ="' + this.value + '">' + this.value.charAt(0).toUpperCase() + this.value.slice(1) + '</option>';
    })
    return opts;
});
$('form div.col-lg-5:eq(1)').empty().append(sel);

<强> jsFiddle example

Answer 2

var select = $("<select></select>").attr("name", "gender");
$('form input[name="gender"]').each(function(index, item) {
    $('<option/>', {
         'value': this.value,
         'text': this.value
    }).appendTo(select);
});

Answer 3

这JSFiddle与我能够得到它一样接近。

HTML：

<form>
   <input type="radio" name="gender" value="male">Male<br>
   <input type="radio" name="gender" value="female">Female
</form>

使用Javascript：

var select = $('form').append($('<select>', {
    name: 'gender',
    id: 'genderSelect'
}));

$("form > input[type='radio']").each(function() {
    $('#genderSelect').append($('<option>', {
        value: $(this).val(),
        text: $(this).val()
    }));
    $(this).remove();
});

您需要对单选按钮的标签执行某些操作以获取值或更轻松地删除它们。

有没有办法将单选按钮列表动态更改为选择下拉菜单？

3 个答案: