javascript - jQuery 在选择时获取多个选择项值

标签 javascript jquery

我想获取所有多选项目的值,并基于此我将使用所选项目创建下拉列表。

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

但我一直只想要最终结果,而不是一一发生。希望我能正确解释。 :)

<小时/>

我想将 after() 段落转换为带有所选项目的下拉选择。那么是否可以使用 phpexplode 或 jquery 本身的任何其他方式来实现它?

我正在寻找的最终输出是

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

最佳答案

这可能对你有帮助

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

关于javascript - jQuery 在选择时获取多个选择项值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22034264/

相关文章:

jquery - 为什么使用 DOM 接口(interface)构建时 SVG 路径会折叠为 0x0,但使用 jQuery 字符串构建时却有效

php - 分页:如何将长文本显示为书页?

javascript - jQuery 从右侧表单显示一个像幻灯片一样的 div

javascript - jQuery 文本函数无法正常工作

javascript - 我有 contenteditable div ,里面是一个不可编辑的跨度,如何通过跨度文本长按来标记 div 的文本

javascript - 如何在悬停时交换图像时淡入淡出 "this.src.replace"(jQuery)

javascript - 如果输入数组值是整数类型,为什么angularjs(ng-repeat)允许在第一次添加重复记录

javascript - 在phonegap中以编程方式更改页面

JavaScript - 如何在文本框的右侧放置星号?

javascript - 数组按照1-9和a-z显示顺序