Question

我想获取所有多选项目值，并根据我将创建包含所选项目的下拉列表。

我的HTML如下

<div>
    <form action="" method="post">
        <label for="title">Title</label>
        <input type="text" name="title" value="" placeholder="Your title" />
        <label for="cars">Select Cars</label>
        <select name="cars" id="cars" multiple>
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="opel">Opel</option>
            <option value="audi">Audi</option>
        </select>
        <input type="submit" value="Submit">
    </form>
</div>

我想在jQuery下面使用

$(document).ready(function(){
    $('#cars').change(function(){
        $(this).after('<p>' + $('#cars').val() + '</p>');
    })      
});

这给了我选择的项目值，但它给出了我所有出现的行。我不知道怎么说，但请看下图。

enter image description here

但我一直只想要最终结果，而不是一个接一个。希望我能正确解释。：）

我希望将（）段落转换为Dropdown选择所选项目。那么可以在jquery中使用php explode或其他任何方式吗？

我正在寻找的最终输出是

  <div>
      <form action="" method="post">
      <label for="title">
          Title</label>
      <input type="text" name="title" value="" placeholder="Your title" />
      <label for="cars">
          Select Cars</label>
      <select name="cars" id="cars" multiple>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="opel">Opel</option>
          <option value="audi">Audi</option>
      </select>

      <select name="sortedcars" id="sortedcars">
        <option value="volvo">Volvo</option>
        <option value="audi">Audi</option>
      </select>

      <input id="create" type="button" value="CreateDropDown">
      </form>
  </div>

Answer 1

问题是，每次更改值时，您都要添加新的p元素。相反，您可以添加一个永久元素来保存所选值，然后在选择值时更新它

<div>
    <form action="" method="post">
        <label for="title">Title</label>
        <input type="text" name="title" value="" placeholder="Your title" />
        <label for="cars">Select Cars</label>
        <select name="cars" id="cars" multiple>
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="opel">Opel</option>
            <option value="audi">Audi</option>
        </select>
        <p></p>
        <input type="submit" value="Submit" />
    </form>
</div>

然后

$(document).ready(function () {
    $('#cars').change(function () {
        $(this).next('p').text($('#cars').val());
    })
});

演示：Fiddle

Answer 2

这可能对你有所帮助

<script>
    $(document).ready(function () {
        $('#cars').click(function () {
            var values = $("#cars").val();
            var select = $("<select/>");
            for (i = 0; i < values.length; i++) {
                select.append($("<option/>", { html: values[i] }));
            }
            $("#dropdownDiv").html("");
            $("#dropdownDiv").append(select);
        })
    });
</script>
<body>
    <div>
        <form action="" method="post">
        <label for="title">
            Title</label>
        <input type="text" name="title" value="" placeholder="Your title" />
        <label for="cars">
            Select Cars</label>
        <select name="cars" id="cars" multiple>
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="opel">Opel</option>
            <option value="audi">Audi</option>
        </select>
        <input id="create" type="button" value="CreateDropDown">
        <div id="dropdownDiv">
        </div>
        </form>
    </div>
</body>

Answer 3

在PHP中，最好使用explode()代替jquery中的额外工作，

<?php
    print_r(explode(',',$_REQUEST['cars']));/// will return array of selected cars
?>

在javascript中你可以这样做，

$(function () {
    $('#cars').on('change',function () {
        if($('#cloneDropdown').length){// check if a drop down already exists
           $('#cloneDropdown').remove();// if yes, then remove it first
        }
        var $sel = $('<select id="cloneDropdown"/>');// create new drop down
        var opts=[];
        $(this.value).each(function(i,j){
             opts.push("<option>"+j+"</option>");// add all selected options
        });
        $sel.html(opts.join());// now new dropdown is created
        $(this).after($sel);// add new select after cars
    })
});

jQuery在select上获得多个select items值

3 个答案: