Question

我需要根据邮政编码的某些值在选择内显示特定选项。到目前为止，我设法做了相反的事情，根据拉链的价值隐藏它，但这太容易游戏了。

<script type="text/javascript">
$(function(){
    var $location = $('#ShippingOptions');
    $location.data('options', $location.find('option')); //cache the options first up when DOM loads
    $('#zip').on('change', function () { //on change event
        $location.html($location.data('options')); //populate the options
        if ($(this).val() == "12345" ) { //check for condition
            $location.find("option[value='300305']").remove(); //remove unwanted option
        }
        if ($(this).val() == "54321" ) { //check for condition
            $location.find("option[value='300305']").remove(); //remove unwanted option
        }

    });
});

</script>
<!--Zip-->
<div class="zip-field">
  <label for="zip">Zip Code</label>
  <input type="number" id="zip" name="zip" />
</div>

<!--Location-->
<div class="location-field">
  <label for="location">Location</label>
  <select class="shippingDropDown" id="ShippingOptions" name="ShippingOptions"><option value="-1">Choose Shipping Option</option>
<option value="300305">Free Shipping $0.00</option></select>
</div>

我没有权限向选项添加类，它们是由渲染引擎动态生成的。然而，我可以定位保持固定的值。计划是默认隐藏它，然后添加显示它的条件。这不是关于为选项设置值，而是显示/隐藏具有特定值的选项

一个小背景故事：我使用的系统让我可以选择添加各种类型的运费，一些免费的付费。然而，因为没有办法辨别/过滤它们，特别是拉链，我处于让用户选择免费送货或付费送货的热闹位置，这就像人性一样，它几乎是无意义。所以我的想法是让用户输入他们的zip并显示免费选项，该选项只能通过值识别，只能显示具有特定zip（全号）而不是其他人的选项。我知道安全问题，并愿意与他们共处。

有没有办法添加/显示该选项而不是删除它？有没有办法让它被选中？

Answer 1

<select class="zip-list">
  <option value="26598">New York</option>
  <option value="19356">Mexico</option>
  <option value="26825">Artic Ocean</option>
  <option value="93583">A Village</option>
</select>

<p><input type="text" class="zip-filter" /></p>

var $zipList = $('.zip-list');
var $zipOptions = $('option', $zipList);
var $zipOptionsAll = $zipOptions.clone();

$('.zip-filter').on('change', function () {
    var filterText = $(this).val();
    var $filteredOptions = $zipOptionsAll.filter(function(e) {
        return $zipOptions.eq(e).val().indexOf(filterText) === 0;
    });
    if ($filteredOptions) {
        $zipList.empty().append($filteredOptions);
    } else {
        $zipList.empty().append($zipOptionsAll);
    }
});

小提琴：http://jsfiddle.net/ekEY4/

应该是非常自我解释的。请注意，由于您正在收听更改事件，因此您必须通过单击/跳出或在更新之前按返回来忽略文本。

我也在做＆＃34;以＃34;开头字符串检查（indexOf），因为我想像邮政编码/邮政编码，你会想要显示所有结果，在缩小之前以某个区号开头。这意味着如果你有＆＃34; 26598＆＃34;和＆＃34; 26825＆＃34;在列表中他们搜索了＆＃34; 26＆＃34;两者都会出现。

＆＃34;当过滤器更改循环并过滤所有以查询开头的选项时。如果发现某些内容，请设置这些选项，否则重置为所有选项，因为找不到任何内容。＆＃34;

编辑：

哦，你想反过来 - 容易。只需将indexOf(filterText) === 0更改为indexOf(filterText) !== 0。

小提琴：http://jsfiddle.net/v3ZDE/

根据特定值在选择中显示选项

1 个答案: