0

使用 Onion 和 wewe 的过滤器下拉菜单正在工作，但是当我更改为日期格式时，过滤器不起作用。我知道如何解决这个问题。

这是我的 HTML 代码

<div>
    <select ID="DropDownList1" Height="72px" Width="184px">
        <option Value="111/111">All</option>
        <option Value="">2013-10-10</option>
        <option Value="">2013-10-09</option>
        <option Value="">Onion</option>
        <option Value="">Wewe</option>
    </select>
    <br />
    <select ID="DropDownList2" Height="18px" Width="187px">
        <option Value="2013-10-10">2013-10-10 Style 1</option>
        <option Value="2013-10-10">2013-10-10 Style 2</option>
        <option Value="2013-10-10">2013-10-10 Style 3</option>
        <option Value="2013-10-09">2013-10-09 Style 1</option>
        <option Value="2013-10-09">2013-10-09 Style 2</option>
        <option Value="2013-10-09">2013-10-09 Style 3</option>
        <option Value="Orange">Orange Style 4</option>
        <option Value="Onion">Onion Style 1</option>
        <option Value="Onion">Onion Style 2</option>
        <option Value="Wewe">wewe Style 2</option>
    </select>
</div>

和 Javascript

var options = $("#DropDownList2").html();
$("#DropDownList1").change(function(e) {
    var text = $("#DropDownList1 :selected").text();
    $("#DropDownList2").html(options);
    if (text == "All") return;
    $('#DropDownList2 :not([value^="' + text.substr(0, 3) + '"])').remove();

});

请帮忙谢谢:)

4

2 回答 2

1 
<select name="select1" id="select1">
<option Value="">All</option>
        <option Value="2013-10-10">2013-10-10</option>
        <option Value="2013-10-09">2013-10-09</option>
        <option Value="Onion">Onion</option>
        <option Value="Wewe">Wewe</option>
</select>


<select name="select2" id="select2">
<option Value="2013-10-10">2013-10-10 Style 1</option>
        <option Value="2013-10-10">2013-10-10 Style 2</option>
        <option Value="2013-10-10">2013-10-10 Style 3</option>
        <option Value="2013-10-09">2013-10-09 Style 1</option>
        <option Value="2013-10-09">2013-10-09 Style 2</option>
        <option Value="2013-10-09">2013-10-09 Style 3</option>
        <option Value="Orange">Orange Style 4</option>
        <option Value="Onion">Onion Style 1</option>
        <option Value="Onion">Onion Style 2</option>
        <option Value="Wewe">wewe Style 2</option>

</select>

JS

$("#select1").change(function() { 
if($(this).data('options') == undefined){
    /*Taking an array of all options-2 and kind of embedding it on the select1*/
    $(this).data('options',$('#select2 option').clone());
    } 
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});

演示

于 2013-10-10T04:28:34.503 回答
0

获取您的第一个选项的长度，然后更改如下代码。var options = $("#DropDownList2").html(); 

$("#DropDownList1").change(function(e) {
    var text = $("#DropDownList1 :selected").text();
    var len = text.length;

    $("#DropDownList2").html(options);
    if (text == "All") return;
   $('#DropDownList2 :not([value^="' + text.substr(0, len) + '"])').remove();
});
于 2013-10-10T04:31:13.893 回答