jQuery：选择所有选择元素，选择值仅以 ajax 发送

Posted 2023-05-09

【中文标题】jQuery：选择所有选择元素，选择值仅以 ajax 发送

【英文标题】：jQuery : Select all Select Element with value selected only to send in ajax

【发布时间】：2020-10-26 21:12:17

【问题描述】：

我正在尝试提高我的 ajax 请求速度，所以我的 ajax 代码是这样的

$.ajax(
    url:url_option,
    type:'POST',
    dataType:'json',
    data:$('#product input[type=\'text\'], #product input[type=\'number\'], #product input[type=\'hidden\'], #product input[type=\'radio\']:checked, #product input[type=\'checkbox\'], #product select, #product textarea, #product input[name=\'quantity\']'),
    success:function(json)

    ,
);

因为我像这样使用它$('#product select') 它会拾取所有选择框有没有办法只选择已经选择的选择元素，以便我可以在 ajax 请求中只发送选择的选择元素

我尝试了很多方法，例如使用 has()、not() 和使用伪，但无法通过修改此方法找到仅选择选定元素的方法：$('#product select')

例如。 我在此代码笔中有三个选择框，当我 console.log($('#product select')); 该 div 内的所有输入时，我有 2 个默认选中和 1 个未选中它返回所有三个选中的 2 个和未选中的 1 个，但我只需要选择选中的两个选择元素

console.log($('#product select')); // is there any way to pick only 2 selected select element

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="product">
    <div class="form-select-group form-group required">
        <label class="control-label" for="input-option28521">HDD/SSD OPTION:</label>
        <select name="option[28521]" id="input-option28521" class="form-control">
            <option value=""> --- Please Select --- </option>
            <option value="192907" selected="selected">250GB HDD</option>
            <option value="192909">320GB HDD</option>
            <option value="192910">500GB HDD</option>
            <option value="192911">750GB HDD</option>
            <option value="192912">1TB HDD</option>
        </select>
    </div>

    <div class="form-select-group form-group required">
        <label class="control-label" for="input-option28523">Ram:</label>
        <select name="option[28523]" id="input-option28523" class="form-control">
            <option value=""> --- Please Select --- </option>
            <option value="192946">4GB</option>
            <option value="192948">6GB</option>
            <option value="192949">8GB</option>
            <option value="192950">10GB</option>
        </select>
    </div>

    <div class="form-select-group form-group required">
        <label class="control-label" for="input-option28527">Add Antivirus:</label>
        <select name="option[28527]" id="input-option28527" class="form-control">
            <option value=""> --- Please Select --- </option>
            <option value="192968" selected="selected">Leave Me Unprotected</option>
            <option value="192970">Install QuickHeal Antivirus 1-Year License (+₦2,500) Renewable</option>
        </select>
    </div>
</div>

如果有人知道或者有任何方法已经在 SE 中发布，请指点我那个帖子 谢谢

【参考方案1】：

您可以使用.filter()，返回那些有值的选择：

$('#product select').filter(function() return $(this).val().length )

$(() => 
  console.log($('#product select').filter(function() return $(this).val().length ).length)
)

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="product">
    <div class="form-select-group form-group required">
        <label class="control-label" for="input-option28521">HDD/SSD OPTION:</label>
        <select name="option[28521]" id="input-option28521" class="form-control">
            <option value=""> --- Please Select --- </option>
            <option value="192907" selected="selected">250GB HDD</option>
            <option value="192909">320GB HDD</option>
            <option value="192910">500GB HDD</option>
            <option value="192911">750GB HDD</option>
            <option value="192912">1TB HDD</option>
        </select>
    </div>

    <div class="form-select-group form-group required">
        <label class="control-label" for="input-option28523">Ram:</label>
        <select name="option[28523]" id="input-option28523" class="form-control">
            <option value=""> --- Please Select --- </option>
            <option value="192946">4GB</option>
            <option value="192948">6GB</option>
            <option value="192949">8GB</option>
            <option value="192950">10GB</option>
        </select>
    </div>

    <div class="form-select-group form-group required">
        <label class="control-label" for="input-option28527">Add Antivirus:</label>
        <select name="option[28527]" id="input-option28527" class="form-control">
            <option value=""> --- Please Select --- </option>
            <option value="192968" selected="selected">Leave Me Unprotected</option>
            <option value="192970">Install QuickHeal Antivirus 1-Year License (+₦2,500) Renewable</option>
        </select>
    </div>
</div>

【讨论】：

谢谢，这就是我要找的东西，非常感谢@Anurag Srivastava

【参考方案2】：

试试 jquery :selected 选择器$('#product option:selected')。您可以遍历它们以访问这些值。

    $('#product option:selected').each(function() 
        console.log($(this).val());
    );

请参阅jquery :selected selector 文档。