【问题标题】:jQuery won't detect when an option is selectedjQuery 不会检测到何时选择了一个选项
【发布时间】:2011-08-26 01:19:11
【问题描述】:

我正在尝试使用 jQuery 操作选择列表,但它不会检测到何时选择了选项。

我的选择列表:

<select id="SelThreeSEL" class="selectListComponent" component="selectListComponent"  multiple="true" size="5">
<option value="1"> Random Value 1 </option>
<option value="2"> Random Value 2 </option>
</select>

我正在使用一个简单的更改功能来验证它是否在选择时检测到一个选项,它甚至不会显示警报。

测试代码:

// Getting values when item is selected
$("#SelThreeSEL").change(function() {
alert($(this).val());
alert($(this).children("option:selected").text());
});

当尝试操作列表(向上/向下移动项目)时:

function moveUpItem(){
$('#SelThreeSEL option:selected').each(function(){
$(this).insertBefore($(this).prev());
});

我得到一个 $('#SelThreeSEL option:selected') 为空。

问题可能是我的选择显示 5 个项目吗?

我已经通过一个简单的 $('div').click() 函数验证了 jQuery 可以在页面上工作。

提前致谢。

【问题讨论】:

  • 根据您的使用情况,您可能想尝试,.bind('change', function() {}) 我过去遇到过问题,快捷方式 .change 没有相同的出于任何原因的行为。
  • link 这是我的测试代码,好像没问题。
  • 谢谢。我现在看到代码应该可以正常工作。我不知道是什么导致与选择列表发生冲突。

标签: jquery select


【解决方案1】:

如下更改 moveUpItem() 函数:

    function moveUpItem(){
       $('#SelThreeSEL').find("option:selected").each(function(){
       $(this).insertBefore($(this).prev());
    });

【讨论】:

    【解决方案2】:

    试试这个代码:http://jsfiddle.net/qLMyk/

    HTML:

    <select id="selList" multiple="true" size="4">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
        <option>Option 5</option>
        <option>Option 6</option>
        <option>Option 7</option>
    </select>
    <button id="moveUp">Move Up</button>
    <button id="moveDown">Move Down</button>
    

    JS:

    $('#selList').change(function(){
        alert($(this).val());
    });
    
    $('#moveUp').click(function(){
        $('#selList option:selected')
            .each(function(i, item)
            {
                var $item = $(item);
                $item.prev().before($item);
            }); 
    });
    
    $('#moveDown').click(function(){
        $('#selList option:selected')
            .each(function(i, item)
            {
                var $item = $(item);
                $item.next().after($item);
            }); 
    });
    

    【讨论】:

    • 不工作。我猜该页面与 jquery 有冲突。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2023-04-10
    • 2013-03-17
    • 2015-01-30
    • 1970-01-01
    • 2015-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多