JS 根据数据属性选择显示选项

Posted 2023-03-05

【中文标题】JS 根据数据属性选择显示选项

【英文标题】：JS Choosen show option according to data-attribute

【发布时间】：2022-01-16 20:34:43

【问题描述】：

在我的网络应用程序中，我有一个选择的下拉列表（第二个），它有一些数据属性的选项取决于另一个下拉列表（第一个）。

我的要求是，当用户在第一个下拉列表中选择一个值时，第二个仅显示数据属性等于用户在第一个下拉列表中选择的值的选项。

我的问题是，如何只显示这些选项。

我有隐藏所有的代码，它工作正常，我似乎不能做的是只选择具有选定数据属性的选项并显示 -

隐藏所有选项的代码：

v_reset = function () 
        $("#div_select").each(function () 
            $(this).children("option").hide();
        );
    
        $('#div_select').trigger('chosen:updated');
    

js函数改变第二个下拉菜单：

v_change = function () 
    let selectedValue = $("[id*=firstSelect] :selected").val();
    if (selectedValue > 0) 
        v_reset();

        var optionsArray = getAllElementsWithAttribute('data-search', selectedValue);
        for (let i = 0; i < optionsArray.length; i++) 
            console.log($(this));
            let value = optionsArray[i].value;
            //select all options with data-search attr equals to the selected value
            //$("#div_select option[='"+ selectedValue+ "']").show();
            $('#div_select').trigger("choosen:updated");
        
;

选择html：

<select id="div_select" class="chosen-select form-control" onchange="v_change(this)" ">
        <option value="-1">Selecionar opção</option>
        <option data-search="" value="23">JMM</option>
        <option data-search="" value="1037">Rota 20</option>
        <option data-search="" value="1572">entrega</option>
        <option data-search="" value="2227">29JUN19</option>
        <option data-search="" value="2417">teste</option>
        <option data-search="1" value="2450">18OUT16</option>
        <option data-search="10098" value="2871">18OUT16</option>
        <option data-search="17079" value="2917">Luis</option>
        <option data-search="17079" value="2918">Luis</option>                              
        <option data-search="17079" value="2940">teste tablet</option>
     </select>

【参考方案1】：

为了显示所有具有data-search属性且值为selectedValue的选项，您可以试试这个：

$(`#div_select option[data-search=$selectedValue]`).show();

在下面的 sn-p 中，我用不同的方法实现了您的要求示例。

$(function()
  $('#source').on('change', function()
    const value = $(this).val();
    const target = $('#target');
    target.find('option[selected]').removeAttr('selected');
    if(value =='-1')
      target.find('option').show().first().attr('selected', 'selected');
    else
      $('#target option').hide().addBack().find(`[data-search=$value]`).show().first().attr('selected', 'selected');
    
  )
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<label for="source">Source: </label>
<select id="source" class="chosen-select form-control" >
<option value="-1">-----</option>
<option value="1">item 1</option>
<option value="2">item 2</option>
<option value="3">item 3</option>
</select>

<label for="target">Target: </label>
<select id="target" class="chosen-select form-control" >
  <option value="-1">---</option>
  <option data-search="1" value="23">JMM</option>
  <option data-search="3" value="1037">Rota 20</option>
  <option data-search="2" value="1572">entrega</option>
  <option data-search="2" value="2227">29JUN19</option>
  <option data-search="3" value="2417">teste</option>
  <option data-search="1" value="2450">18OUT16</option>
  <option data-search="1" value="2871">18OUT16</option>
  <option data-search="3" value="2917">Luis</option>
  <option data-search="2" value="2918">Luis</option>                              
  <option data-search="2" value="2940">teste tablet</option>
</select>