Question

我有这个简单的html标记，我正在尝试从

创建自定义选择下拉列表

<div class="form-group col-sm-6 select">
    <label for="">Accounts</label>
    <input type="text" class="form-control" id="acc_reports" readonly placeholder="select an account">
    <ul class="acc_reports">
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
     </ul>
</div>

我正在尝试获取所单击列表项中的文本，并通过此javascript代码将其作为输入字段的值

var options = $('.select>ul>li');
options.click(function() {
 var value = $(this).text();
 var optClass = $(this).parent().attr('class');
 var select = $('#' + optClass);
 select.attr('value', value);
});

它在firefox上运行正常，但是没有处理chrome，即处理一些列表项而不处理其他项目。我没有收到任何错误

编辑：我在输入上运行另一个js代码来触发列表，我试图创建一个小提琴但不知何故它不适用于小提琴，但这个代码块在所有浏览器上运行良好。但我更新了这个问题，因为它可能与我的问题有关。

input = $('.select>input');

input.focusin(function() {
inputIdIn = $(this).attr('id');
CstSelectIn(inputIdIn);

});

input.focusout(function() {
inputIdOut = $(this).attr('id');
CstSelectOut(inputIdOut);

});

function CstSelectIn (inputIdIn) {
dropdownIn = $('.' + inputIdIn);
ddHeightIn = dropdownIn.height() + 'px';
    dropdownIn.css({
    height: '0',
    display: 'block'
    }).animate({
        height: ddHeightIn
    }, 400, 'easeOutExpo');
};
function CstSelectOut (inputIdOut) {
dropdownOut = $('.' + inputIdOut);
dropdownOut.animate({
    height: '0'
}, 400, 'easeOutExpo', function() {
    dropdownOut.css({
        display: 'none',
        height: 'auto'
    });
});
};

EDIT2：我评论了focusIn()和focusOut()函数并且它有效，我一直在尝试调试问题，但仍然无法弄明白。这些函数在chrome上存在某种冲突，即阻止选择工作

Answer 1

Chrome似乎将输入字段的readonly表示“不要让它通过脚本更新”。（IE我现在还没有测试，但我认为它因为同样的原因而失败了。）

解决方案：暂时删除readonly（将其设置为false），设置新值，然后再次将其设为只读：

select.attr('readonly', false).attr('value', value).attr('readonly', true);

http://jsfiddle.net/ae9bmw0z/

Answer 2

我为这个自定义选择菜单尝试了另一种方法，通过使用.click()非焦点功能并且它起作用，看起来在chrome中有一些混乱，即在应用focusout函数和运行select函数时可能会发生冲突来自焦点输出功能的列表设置为display: none;。

获取列表项jquery中的文本不在chrome＆amp;即

2 个答案: