如何将复选框转换为下拉列表

How can i convert checkboxes into dropdown list?

本文关键字：下拉列表 转换 复选框      更新时间：2024-06-14

我有几个复选框，我想把它们转换成下拉列表。我尝试了一些东西，但最后不知道该怎么办？

<form id="form-wysija-2" class="widget_wysija" action="#wysija" method="post">
    <p class="wysija-checkbox-label">Select list(s):</p>
        <p class="wysija-checkbox-paragraph">
            <label>
                <input class="wysija-checkbox validate[required]" type="checkbox" value="1" name="wysija[user_list][list_id][]">
                    General Antiques
            </label>
        </p>
        <p class="wysija-checkbox-paragraph">
            <label>
                <input class="wysija-checkbox validate[required]" type="checkbox" value="3" name="wysija[user_list][list_id][]">
                Antique & Collectible Tools
            </label>
        </p>
</form>

我试着按照jQuery将这些复选框转换为下拉列表。但不知道如何成功地做到这一点。

jQuery(document).ready(function($){
  var extra, checkBoxesName,
      checkBoxlabel,
      checkBoxes = $('.wysija-checkbox-paragraph');
  var checkBoxesLabel = $('.wysija-checkbox-label');

  checkBoxesName = checkBoxes.find('input').prop('name');
  checkBoxlabel = checkBoxes.find('label').text();
  checkBoxesLabel.append('<select name="'+checkBoxesName+'">'+extra+'</select>');
  $('.wysija-checkbox-paragraph').each(function(n){
    var dataText = $(this).find('label').text();
    $('select[name='+checkBoxesName+']').append('<option value="'+n+'">'+dataText+'</option>');
  });
  //checkBoxes.remove();
});

试试这个：

var checkBoxes = $('.wysija-checkbox-paragraph'),
    checkBoxesLabel = $('.wysija-checkbox-label'),
    checkBoxesName = checkBoxes.find('input').prop('name')
    $select = $('<select name="' + checkBoxesName + '"></select>').appendTo(checkBoxesLabel);
checkBoxes.each(function (n) {
    var dataText = $(this).find('label').text();
    var dataValue = $(this).find('input').val();
    $select.append('<option value="' + dataValue + '">' + dataText + '</option>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form-wysija-2" class="widget_wysija" action="#wysija" method="post">
    <p class="wysija-checkbox-label">Select list(s):</p>
    <p class="wysija-checkbox-paragraph">
        <label>
            <input class="wysija-checkbox validate[required]" type="checkbox" value="1" name="wysija[user_list][list_id][]" /> General Antiques
        </label>
    </p>
    <p class="wysija-checkbox-paragraph">
        <label>
            <input class="wysija-checkbox validate[required]" type="checkbox" value="3" name="wysija[user_list][list_id][]" /> Antique & Collectible Tools
        </label>
    </p>
</form>

请注意，由于复选框允许选择多个值，您可能需要将multiple属性添加到selectbox中，以便允许相同的行为。

jQuery(document).ready(function($){
  var extra, checkBoxesName,
      checkBoxlabel,
      checkBoxes = $('.wysija-checkbox-paragraph');
  var checkBoxesLabel = $('.wysija-checkbox-label');
  checkBoxesName = checkBoxes.find('input').prop('name');
  checkBoxlabel = checkBoxes.find('label').text();
  checkBoxesLabel.append('<select name="'+checkBoxesName+'">'+extra+'</select>');
  $('.wysija-checkbox-paragraph').each(function(n){
    var dataText = $(this).find('label').text();
    $('.wysija-checkbox-paragraph').append('<select name="'+checkBoxesName+']" > <option value="'+n+'">'+dataText+'</option></select>');
  });
  //checkBoxes.remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="form-wysija-2" class="widget_wysija" action="#wysija" method="post">
    <p class="wysija-checkbox-label">Select list(s):</p>
        <p class="wysija-checkbox-paragraph">
            <label>
                <input class="wysija-checkbox validate[required]" type="checkbox" value="1" name="wysija[user_list][list_id][]">
                    General Antiques
            </label>
        </p>
        <p class="wysija-checkbox-paragraph">
            <label>
                <input class="wysija-checkbox validate[required]" type="checkbox" value="3" name="wysija[user_list][list_id][]">
                Antique & Collectible Tools
            </label>
        </p>
  
</form>

相关文章：