将所选选项设置为选择框中的第一个选项
Set the selected option as the first option in the selectbox
在 IE 中打开 this link 以准确理解我将要描述的行为并寻求 hack。
我有以下 select 列表:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
当我在 IE 中呈现它时,与其他浏览器相比,它的下拉行为 发生了变化,因为某些选项被推到 [ 上方=38=]box 而其他的被推到下方(基于 selected 选项)
由于这是 IE的默认行为,我正在寻找的是选项应该重新排序,即用户 selects 应该成为第一个选项的选项。检查下图:
有人对此有变通办法吗?
此外,如果有人知道更改此默认 IE 行为的技巧,那么知道并了解这一点会很棒
这是正确的方法吗?
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
var choose = $("#choose").bind('change',function(){alert("hello");
choose.find('option:selected').prependTo(choose);
});
});
</script>
<head>
<body>
<select id="choose">
<option value="choose">choose</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
这是一个适用于 Jquery 的方法:
HTML
<select id = "choose">
<option value="null" name="volvo">Volvo</option>
<option value="1" name="saab">Saab</option>
<option value="2" name="mercedes">Mercedes</option>
<option value="3" name="audi">Audi</option>
</select>
jQuery
var choose = $("#choose").bind('change',function(){
choose.find('option:selected').prependTo(choose);
});
(Source)
完整代码
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
var choose = $("#choose").bind('change', function() {
alert("hello");
choose.find('option:selected').prependTo(choose);
});
});
</script>
<head>
<body>
<select id="choose">
<option value="choose">choose</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
<html>
<head>
<script src="jquery-3.1.0.js"></script>
<script>
$(function () {
var selectedItem = $("#selectItem").bind('change', function () {
selectedItem.find('option:selected').prependTo(selectedItem);
});
});
</script>
<head>
<body>
<select id="selectItem">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
</body>
</html>
谢谢...:)
在 IE 中打开 this link 以准确理解我将要描述的行为并寻求 hack。
我有以下 select 列表:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
当我在 IE 中呈现它时,与其他浏览器相比,它的下拉行为 发生了变化,因为某些选项被推到 [ 上方=38=]box 而其他的被推到下方(基于 selected 选项)
由于这是 IE的默认行为,我正在寻找的是选项应该重新排序,即用户 selects 应该成为第一个选项的选项。检查下图:
有人对此有变通办法吗?
此外,如果有人知道更改此默认 IE 行为的技巧,那么知道并了解这一点会很棒
这是正确的方法吗?
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
var choose = $("#choose").bind('change',function(){alert("hello");
choose.find('option:selected').prependTo(choose);
});
});
</script>
<head>
<body>
<select id="choose">
<option value="choose">choose</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
这是一个适用于 Jquery 的方法:
HTML
<select id = "choose">
<option value="null" name="volvo">Volvo</option>
<option value="1" name="saab">Saab</option>
<option value="2" name="mercedes">Mercedes</option>
<option value="3" name="audi">Audi</option>
</select>
jQuery
var choose = $("#choose").bind('change',function(){
choose.find('option:selected').prependTo(choose);
});
(Source)
完整代码
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
var choose = $("#choose").bind('change', function() {
alert("hello");
choose.find('option:selected').prependTo(choose);
});
});
</script>
<head>
<body>
<select id="choose">
<option value="choose">choose</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
<html>
<head>
<script src="jquery-3.1.0.js"></script>
<script>
$(function () {
var selectedItem = $("#selectItem").bind('change', function () {
selectedItem.find('option:selected').prependTo(selectedItem);
});
});
</script>
<head>
<body>
<select id="selectItem">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
</body>
</html>
谢谢...:)