Question

我在获取jQuery中的选择框值时遇到了麻烦。我希望复选框值在复选框内更改功能。即：

内

$('input').on('change', function()  //need selection box value here
});

<select class="selectclass" id="id" >
 <option  value="22" >option1</option>   
  <option  value="33" >option21</option> 
</select>

通过像这样的stackoverflow问题，却无法得到我想要的东西

jquery change select to checkbox

等...

Answer 1

在这里，您可以select option

将checkbox转换为change

＆＃13;

$('select').on('change', function() {
  var val = $(this).val();
  $('<input/>').attr({
  type: 'checkbox',
  value: val
  }).appendTo('#check');
  console.log(val);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selectclass" id="id">
 <option  value="22" >option1</option>   
  <option  value="33" >option21</option> 
</select>
<div id="check"></div>

＆＃13;

或没有change功能，只需onload

＆＃13;

$('select option').each(function() {
  var val = $(this).val();
  $('<input/>').attr({
    type: 'checkbox',
    value: val
  }).appendTo('#check');
})

$('input').on('change', function() {
  alert(this.value);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selectclass" id="id">
 <option  value="22" >option1</option>   
  <option  value="33" >option21</option> 
</select>
<div id="check"></div>

＆＃13;

Answer 2

这是用于分解值并显示标签的代码。

$('select#selectid option').each(function() {
  var val = $(this).val();

$("#check").append('<input type="checkbox" value="'+$(this).val()+'">'+$(this).val()+'</input>');
   })

$('#selectid').prop('disabled','disabled').hide();

$('input').on('change', function(){
  alert(this.value);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selectclass" id="selectid">
 <option  value="22" >option1</option>   
  <option  value="33" >option21</option> 
</select>
<div id="check"></div>

将选择框转换为复选框

2 个答案: