使用jQuery过滤选择框

时间:2014-12-23 13:50:29

标签: javascript jquery html each indexof

我尝试过滤选择框的文本输入。 我试图解决它很多时间但它仍然不能正常工作。 也许是因为它是希伯来语?

HTML:                              

<option value="628077"> new york</option>
<option value="244228">רמת גן<option>
<option value="641332"> דימונה</option>
<option value="240812"> הזורעים</option>
.
.
.
<option value="640375"> עתניאל</option>
<option value="344580">  חיפה</option>
<option value="440560">  בית רבן</option>
<option value="520098"> הרצליה</option>
</select>

jQuery的:

<script type="text/javascript" >
        $('#city').keyup(function () {

            var valthis = $(this).val();
            var num = 0;
            $('select#DropDownList1>option').each(function () {
                var text = $(this).text();
                if(text.indexOf(valthis) != -1)  
               { $(this).show();} 
               else{ $(this).hide();}

            });

        });
</script>

我需要你的帮助!

2 个答案:

答案 0 :(得分:8)

$('#city').keyup(function () {
    var valthis = $(this).val().toLowerCase();

    $('select#DropDownList1>option').each(function () {
        var text = $(this).text().toLowerCase();
        if (text.indexOf(valthis) !== -1) {
            $(this).show(); $(this).prop('selected',true);
        }
        else {
            $(this).hide();
        }
    });
});

DEMO希望有所帮助。

答案 1 :(得分:0)

这不是最干净的方式,但这样的事情应该有效: http://jsfiddle.net/milanvanschaik/11146uxb/2/

$(function() {
    var data = [
        { value: 628077, text: 'New York' },
        { value: 628047, text: 'Amsterdam' },
        { value: 628037, text: 'Paris' }
    ];

    data.forEach(function(val) {
        $('#select').append($('<option></option>').attr('value', val.value).text(val.text));
    });

    $('#city').keyup(function() {
        var inputValue = $(this).val();
        data.forEach(function(val) {
            if(val.text.toLowerCase().indexOf(inputValue.toLowerCase()) != -1) {
                $('#select>option[value="'+val.value+'"]').remove();
                $('#select').append($('<option></option>').attr('value', val.value).text(val.text));
            } else {
                $('#select>option[value="'+val.value+'"]').remove();
            }
        });
    });
});

编辑:这里有一些希伯来语:http://jsfiddle.net/milanvanschaik/11146uxb/3/