我建立一个小函数,它向div添加下拉值,但我要求它每当名称添加到div时它假设进入新行,它应该按升序排列,我试过但我没有达到解决方案.
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
var str = "";
$('#me').change(function(){
str += $(this + "option:selected").text()
$('#text').text(str)
})
});
</script>
<style>
.main {
margin:0 auto;
width:500px;
border:solid 1px #F00;
height:500px
}
#text{ margin-left:50px; margin-top:50px; font:24px/18px Tahoma, Geneva, sans-serif; color:#F00}
</style>
</head>
<body>
<div class="main">
<select id="me">
<option>first</option>
<option>second</option>
<option>third</option>
<option>fourth</option>
</select>
<div id="text"></div>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
$(function(){
var strings = []; // Use an array instead of strings
$('#me').change(function(){
// Add the current value to the array
strings.push($(this + "option:selected").text());
// Sort the array
strings.sort();
var res = "";
// Concatenate the sorted values of the array
// and add a newline to each value
for(var i = 0; i < strings.length; ++i)
res += strings[i]+' \n';
// Display the text
$('#text').text(res);
});
});
Run Code Online (Sandbox Code Playgroud)
#text{
white-space:pre; // Don't ignore the newlines.
}
Run Code Online (Sandbox Code Playgroud)