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

Question

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

<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();

});

Answer 1

试试这个:

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 属性添加到选择框，以允许相同的行为。