支持HTML的JQuery可編輯選擇

我想使用jQuery可編輯選擇支持HTML（http://htmlpreview.github.io/?https://github.com/indrimuska/jquery-editable-select/blob/master/example/index.html），但我不明白爲什麼當我們選擇另一個元素後選擇了fairst元素？支持HTML的JQuery可編輯選擇

這是我的代碼：

<head> 
    <meta charset="utf-8"> 
    <title>jQuery Editable Select Example</title> 
    <meta name="author" content="https://plus.google.com/u/0/+IndriMuska" /> 
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" /> 
    <link href="https://rawgithub.com/indrimuska/jquery-editable-select/master/source/jquery.editable-select.min.css" rel="stylesheet" /> 
    <style> 
     body { 
      padding: 30px 60px; 
     } 
     .sources { 
      position: absolute; 
      top: 65px; 
      right: 80px; 
     } 
    </style> 
</head> 
<div class="row-fluid"> 
    <div class="span6"> 
     <h3>HTML support</h3> 
     <select id="html" style="width:200px"> 

      <option>Audi - &lt;small&gt;&lt;a href="http://www.audi.com/" target="_blank" id="coucou" style="float:right" rel="nofollow"&gt;?&lt;/a&gt;&lt;/small&gt;</option> 
      <option>BMW - &lt;small&gt;&lt;a href="http://www.bmw.com/" target="_blank" rel="nofollow"&gt;www.bmw.com&lt;/a&gt;&lt;/small&gt;</option> 
      <option>Citroen - &lt;small&gt;&lt;a href="http://www.citroen.com/" target="_blank" rel="nofollow"&gt;www.citroen.com&lt;/a&gt;&lt;/small&gt;</option> 
      <option>Fiat - &lt;small&gt;&lt;a href="http://www.fiat.com/" target="_blank" rel="nofollow"&gt;www.fiat.com&lt;/a&gt;&lt;/small&gt;</option> 
      <option>Ford - &lt;small&gt;&lt;a href="http://www.ford.com/" target="_blank" rel="nofollow"&gt;www.ford.com&lt;/a&gt;&lt;/small&gt;</option> 
      <option>Jaguar - &lt;small&gt;&lt;a href="http://www.jaguar.com/" target="_blank" rel="nofollow"&gt;www.jaguar.com&lt;/a&gt;&lt;/small&gt;</option> 
      <option>Jeep - &lt;small&gt;&lt;a href="http://www.jeep.com/" target="_blank" rel="nofollow"&gt;www.jeep.com&lt;/a&gt;&lt;/small&gt;</option> 
      <option>Lancia - &lt;small&gt;&lt;a href="http://www.lancia.com/" target="_blank" rel="nofollow"&gt;www.lancia.com&lt;/a&gt;&lt;/small&gt;</option> 
      <option>Land Rover - &lt;small&gt;&lt;a href="http://www.landrover.com/" target="_blank" rel="nofollow"&gt;www.landrover.com&lt;/a&gt;&lt;/small&gt;</option> 
      <option>Mercedes - &lt;small&gt;&lt;a href="http://www.mercedes-benz.com/" target="_blank" rel="nofollow"&gt;www.mercedes-benz.com&lt;/a&gt;&lt;/small&gt;</option> 
      <option>Mini - &lt;small&gt;&lt;a href="http://www.mini.com/" target="_blank" rel="nofollow"&gt;www.mini.com&lt;/a&gt;&lt;/small&gt;</option> 
      <option>Nissan - &lt;small&gt;&lt;a href="http://www.nissan.it/" target="_blank" rel="nofollow"&gt;www.nissan.it&lt;/a&gt;&lt;/small&gt;</option> 
      <option>Opel - &lt;small&gt;&lt;a href="http://www.opel.com/" target="_blank" rel="nofollow"&gt;www.opel.com&lt;/a&gt;&lt;/small&gt;</option> 
      <option>Peugeot - &lt;small&gt;&lt;a href="http://www.peugeot.com/" target="_blank" rel="nofollow"&gt;www.peugeot.com&lt;/a&gt;&lt;/small&gt;</option> 
      <option>Porsche - &lt;small&gt;&lt;a href="http://www.porsche.com/" target="_blank" rel="nofollow"&gt;www.porsche.com&lt;/a&gt;&lt;/small&gt;</option> 
      <option>Renault - &lt;small&gt;&lt;a href="http://www.renault.com/" target="_blank" rel="nofollow"&gt;www.renault.com&lt;/a&gt;&lt;/small&gt;</option> 
      <option>Smart - &lt;small&gt;&lt;a href="http://www.smart.com/" target="_blank" rel="nofollow"&gt;www.smart.com&lt;/a&gt;&lt;/small&gt;</option> 
      <option>Volkswagen - &lt;small&gt;&lt;a href="http://volkswagen.com/" target="_blank" rel="nofollow"&gt;volkswagen.com&lt;/a&gt;&lt;/small&gt;</option> 
      <option>Volvo - &lt;small&gt;&lt;a href="http://www.volvo.com/" target="_blank" rel="nofollow"&gt;www.volvo.com&lt;/a&gt;&lt;/small&gt;</option> 
     </select> 
    </div> 

</div> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="https://rawgithub.com/indrimuska/jquery-editable-select/master/source/jquery.editable-select.js"></script> 
<script> 
    window.onload = function() { 
     $('#html').editableSelect(); 
     $('#coucou').mouseenter(function() { 
      alert("Hello"); 
     }); 
    } 
</script>

來源

2016-03-17 user225049

這是因爲有一個過濾回事。 – RRK

使用{ filter: false }在插件初始化，這將打開過濾。

$('#html').editableSelect({ filter: false });

body { 
 
    padding: 30px 60px; 
 
} 
 
.sources { 
 
    position: absolute; 
 
    top: 65px; 
 
    right: 80px; 
 
}

<meta name="author" content="https://plus.google.com/u/0/+IndriMuska" /> 
 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://rawgithub.com/indrimuska/jquery-editable-select/master/source/jquery.editable-select.min.css" rel="stylesheet" /> 
 
<div class="row-fluid"> 
 
    <div class="span6"> 
 
    <h3>HTML support</h3> 
 
    <select id="html" style="width:200px"> 
 

 
     <option>Audi - &lt;small&gt;&lt;a href="http://www.audi.com/" target="_blank" id="coucou" style="float:right" rel="nofollow"&gt;?&lt;/a&gt;&lt;/small&gt;</option> 
 
     <option>BMW - &lt;small&gt;&lt;a href="http://www.bmw.com/" target="_blank" rel="nofollow"&gt;www.bmw.com&lt;/a&gt;&lt;/small&gt;</option> 
 
     <option>Citroen - &lt;small&gt;&lt;a href="http://www.citroen.com/" target="_blank" rel="nofollow"&gt;www.citroen.com&lt;/a&gt;&lt;/small&gt;</option> 
 
     <option>Fiat - &lt;small&gt;&lt;a href="http://www.fiat.com/" target="_blank" rel="nofollow"&gt;www.fiat.com&lt;/a&gt;&lt;/small&gt;</option> 
 
     <option>Ford - &lt;small&gt;&lt;a href="http://www.ford.com/" target="_blank" rel="nofollow"&gt;www.ford.com&lt;/a&gt;&lt;/small&gt;</option> 
 
     <option>Jaguar - &lt;small&gt;&lt;a href="http://www.jaguar.com/" target="_blank" rel="nofollow"&gt;www.jaguar.com&lt;/a&gt;&lt;/small&gt;</option> 
 
     <option>Jeep - &lt;small&gt;&lt;a href="http://www.jeep.com/" target="_blank" rel="nofollow"&gt;www.jeep.com&lt;/a&gt;&lt;/small&gt;</option> 
 
     <option>Lancia - &lt;small&gt;&lt;a href="http://www.lancia.com/" target="_blank" rel="nofollow"&gt;www.lancia.com&lt;/a&gt;&lt;/small&gt;</option> 
 
     <option>Land Rover - &lt;small&gt;&lt;a href="http://www.landrover.com/" target="_blank" rel="nofollow"&gt;www.landrover.com&lt;/a&gt;&lt;/small&gt;</option> 
 
     <option>Mercedes - &lt;small&gt;&lt;a href="http://www.mercedes-benz.com/" target="_blank" rel="nofollow"&gt;www.mercedes-benz.com&lt;/a&gt;&lt;/small&gt;</option> 
 
     <option>Mini - &lt;small&gt;&lt;a href="http://www.mini.com/" target="_blank" rel="nofollow"&gt;www.mini.com&lt;/a&gt;&lt;/small&gt;</option> 
 
     <option>Nissan - &lt;small&gt;&lt;a href="http://www.nissan.it/" target="_blank" rel="nofollow"&gt;www.nissan.it&lt;/a&gt;&lt;/small&gt;</option> 
 
     <option>Opel - &lt;small&gt;&lt;a href="http://www.opel.com/" target="_blank" rel="nofollow"&gt;www.opel.com&lt;/a&gt;&lt;/small&gt;</option> 
 
     <option>Peugeot - &lt;small&gt;&lt;a href="http://www.peugeot.com/" target="_blank" rel="nofollow"&gt;www.peugeot.com&lt;/a&gt;&lt;/small&gt;</option> 
 
     <option>Porsche - &lt;small&gt;&lt;a href="http://www.porsche.com/" target="_blank" rel="nofollow"&gt;www.porsche.com&lt;/a&gt;&lt;/small&gt;</option> 
 
     <option>Renault - &lt;small&gt;&lt;a href="http://www.renault.com/" target="_blank" rel="nofollow"&gt;www.renault.com&lt;/a&gt;&lt;/small&gt;</option> 
 
     <option>Smart - &lt;small&gt;&lt;a href="http://www.smart.com/" target="_blank" rel="nofollow"&gt;www.smart.com&lt;/a&gt;&lt;/small&gt;</option> 
 
     <option>Volkswagen - &lt;small&gt;&lt;a href="http://volkswagen.com/" target="_blank" rel="nofollow"&gt;volkswagen.com&lt;/a&gt;&lt;/small&gt;</option> 
 
     <option>Volvo - &lt;small&gt;&lt;a href="http://www.volvo.com/" target="_blank" rel="nofollow"&gt;www.volvo.com&lt;/a&gt;&lt;/small&gt;</option> 
 
    </select> 
 
    </div> 
 

 
</div> 
 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
 
<script src="https://rawgithub.com/indrimuska/jquery-editable-select/master/source/jquery.editable-select.js"></script>

來源

2016-03-17 11:35:16 RRK

支持HTML的JQuery可編輯選擇

回答

相關問題