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

试试这个：

＆＃13;

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>');
});

＆＃13;

<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>

＆＃13;

注意，由于复选框允许选择多个值，因此您可能希望将multiple属性添加到选择框，以便允许相同的行为。

Answer 2

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>

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

2 个答案: