我创建了两个选择器。当我双击选择器中的一个选项时,所选值将显示在另一个选择器中。突然间,它不起作用了。我双击左侧选择器中的一个选项,但无法获取选项值。如果我单击一个选项一次然后再次双击,它就会起作用。我不知道发生了什么。
this.dClick = function(ele, ele2){
var _nut = navigator.userAgent.toUpperCase();
var isIE=(_nut.indexOf("MSIE") >= 0 || _nut.indexOf("WINDOW") >= 0)?true:false;
if(isIE){
$(ele).dblclick(function(){
var objThis = $(this).find(':selected');
console.log(Object.entries(objThis));
var ok_add = true;
if(ok_add){
var nOption = $("<option></option>").attr("value", $(objThis).val()).text($(objThis).text()).prependTo(ele2);
obj.dOptionClick(nOption, ele2, ele);
$(objThis).remove();
}
});
}
}
有人有什么建议吗?谢谢。
我们不要依赖特定于浏览器的检查,而是使用一种更标准化的方法,该方法应该适用于现代浏览器。
$(document).ready(function() {
// Function to handle double-click event
$('#selector1').on('dblclick', 'option:selected', function() {
var $selectedOption = $(this);
var newValue = $selectedOption.val();
var newText = $selectedOption.text();
// Create new option element
var $newOption = $('<option></option>').val(newValue).text(newText);
// Append to selector2
$('#selector2').append($newOption);
// Remove from selector1
$selectedOption.remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<h2>Double Click to Move Options</h2>
<select id="selector1" multiple style="width: 200px; height: 150px;">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
<select id="selector2" multiple style="width: 200px; height: 150px;"></select>