我想获取所有的多选项目值,并根据该值创建包含所选项目的下拉列表。
我的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>');
})
});
这给了我选定的项目价值,但是却给了我所有出现的行。我不知道该怎么说,但是请看下图。
但是我一直都只希望最终结果,而不是一个接一个地发生。希望我能正确解释。 :)
我想将after()段落转换为包含所选项目的Dropdown select。那么是否有可能在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>
最佳答案
可能这可能对您有帮助
<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>