Question

我正在尝试创建一个具有以下功能的表单：

如果隐藏字段不包含任何值，请显示所有选择选项。
如果隐藏字段中存在值，则仅显示包含该值的项目。

隐藏值由参数填充。

到目前为止，我的代码在下面，无法正常工作。在此示例中，假设hiddendealer输入中包含值“ honda”，所以我只想在其中显示单词“ honda”的选项。

<select name="dealership-selection" id="dealer">
    <option value="" selected="selected">Please select your dealer</option>
    <option value="Fiat, Location 1">Fiat, Location 1</option>
    <option value="Honda, Location 1">Honda, Location 1</option>
    <option value="Honda, Location 2">Honda, Location 2/option>
    <option value="Kia, Location 1">Kia, Location 1</option>
    <option value="Peugeot, Location 1">Peugeot, Location 1</option>
    <option value="Peugeot, Location 2">Peugeot, Location 2</option>
    <option value="Škoda, Location 1">Škoda, Location 1</option>
</select>

<input type="hidden" name="hiddendealer" value="">

<script>
    // get contents of hidden input; store in variable 
    var valDealer =  $("span.hiddendealer input").val(); 

    $('select#dealer option[value="' + valDealer + '"]').attr('selected', 'selected'); 

    if (valDealer.length == 1) {
        $('select#dealer option').each(function(){
                if ($(this).is(':contains("' + valDealer + '")')) {
                    console.log('this option contains the variable string');
                    $(this).show();
                } else {
                    console.log('this option does not contain the variable string');
                    $(this).hide();
                }
        });
    };
</script>

任何帮助将不胜感激。

编辑抱歉，我没有提到使用Contact Form 7在WordPress上进行的操作-这是选择框的简化版本。

Answer 1

AFAIK在HTML中隐藏<option>元素存在问题。我建议您创建一个带有选项数组的对象，例如

options = {
    honda: [
        { value: 1, text: 'Some text 1' },
        { value: 2 text: 'Some text 2' },
    ],
    kia: [
        { value: 3, text: 'Some text 3' },
        { value: 4 text: 'Some text 4' },
    ]
}

，然后编写一个函数，该函数将根据选定的经销商（提供visibleOptions）重新绘制您的选择框，例如：

(function($) {
    $(document).ready(function() {

        var options = {
            honda: [
                { value: 1, text: 'Some text 1' },
                { value: 2, text: 'Some text 2' },
            ],
            kia: [
                { value: 3, text: 'Some text 3' },
                { value: 4, text: 'Some text 4' },
            ]
        };

        function setDealer(dealer) {
            var visibleOptions = options[dealer];
            var place = $('#place');
            place.empty();
            for (var i = 0; i < visibleOptions.length; i++) {
                // Do not forget to escape your data!
                // I am not doing this here, because it is just an example
                place.append(
                    '<option value="' + visibleOptions[i].value + '">'
                      + visibleOptions[i].text +
                    '</option>'
                );
            }
        }

        setDealer('honda');
        
        $('#dealer').change(function() {
           setDealer($(this).val());
        });
    });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Dealer: <select name="dealer" id="dealer">
<option value="honda">Honda</option>
<option value="kia">Kia</option>
</select>
<select name="place" id="place"></select>

Answer 2

我认为最好使用filter()方法根据选项的值对选项应用不同的操作。我还建议您使用toLowerCase()方法执行不区分大小写的字符串比较。在下面的示例中，仅当其value属性包含指定的子字符串时，才会显示该选项。

$("#dealer").change(function() {
  var search = $("#dealer").val().toLowerCase();
  $("[name=dealership] option")
    .hide()
    .filter(function() {
      var option = $(this).attr('value').toLowerCase();
      return ~option.indexOf(search);
    })
    .show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="dealer">Dealer</label>
<input id="dealer" type="text">

<label for="dealers">Dealers</label>
<select name="dealership" id="dealers">
  <option value="" selected="selected">Please select your dealer</option>
  <option value="Fiat, Location 1">Fiat, Location 1</option>
  <option value="Honda, Location 1">Honda, Location 1</option>
  <option value="Honda, Location 2">Honda, Location 2/option>
  <option value="Kia, Location 1">Kia, Location 1</option>
  <option value="Peugeot, Location 1">Peugeot, Location 1</option>
  <option value="Peugeot, Location 2">Peugeot, Location 2</option>
  <option value="Škoda, Location 1">Škoda, Location 1</option>
</select>

jQuery显示基于参数的选择选项

2 个答案: