将选定的选项设置为选择框中的第一个选项 [英] Set the selected option as the first option in the selectbox

查看:143
本文介绍了将选定的选项设置为选择框中的第一个选项的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在IE中打开



有人有一个解决这个问题的方法?

另外如果有人知道黑客可以改变这种默认的IE行为,那么知道并学习这些知识将是很好的


$ b

这是正确的方法吗?

 <!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>选择< / option>
< option value =saab> Saab< / option>
< option value =opel> Opel< / option>
< option value =audi> Audi< / option>
< / select>

< / body>
< / html>


解决方案

这是一个在Jquery中工作的方法: p>

HTML

 < select id = 选择 > 
< option value =nullname =volvo>沃尔沃< / option>
< option value =1name =saab> Saab< / option>
< option value =2name =mercedes> Mercedes< / option>
< option value =3name =audi> Audi< / option>
< / select>

jQuery

  var choose = $(#choose)。bind('change',function(){
choose.find('option:selected')。prependTo(choose );
});

来源



完整代码

<

 <!DOCTYPE html>< html>< head> < script src =https://code.jquery.com/jquery-3.1.0.min.jsintegrity =sha256-cCueBR6CsyA4 / 9szpPfrX3s49M9vUU5BgtiJj06wt / s =crossorigin =anonymous>< / script> <脚本> $(document).ready(function(){var choose = $(#choose)。bind('change',function(){alert(hello); choose.find('option:selected')。 prependTo(choose);});}); < /脚本> < HEAD> <身体GT; < select id =choose> < option value =choose>选择< / option> < option value =saab> Saab< / option> < option value =opel> Opel< / option> < option value =audi> Audi< / option> < /选择> < / body>< / html>  

Open this link in IE to exactly understand the behavior that I will be describing and seek a hack for.

I have the following select list:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select> 

When I render this in IE, drop-down behavior of this changes compared to other browsers due to which some of the options are pushed above the selectbox while the others are pushed below (based on the selected option)

Since this is the default behavior of IE, what I am looking for is that the options should get re-ordered i.e. the option that a user selects should be made the first option. Check the image below:

Does anyone have a work-around for this ?

Also if anyone knows a hack to alter this default IE behavior, it would be great to know and learn that

Is this the right way ?

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

解决方案

Here is a method that works in 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)

FULL CODE

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

这篇关于将选定的选项设置为选择框中的第一个选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆