Question posted in
You can find the official documentation here.

jQuery : Select all Select Element with value selected only to send in ajax – Jquery ajax

I’m trying to Improve my ajax request speed so my ajax code is like this

$.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){

    },
});

Because I use it like this $('#product select') it picks up all select box is there any way to pick only select elements which are already selected so that I can send only selected select element in ajax request

enter image description here

I have tried piking many ways like using has(), not() and using pseudo but not able to find a way to pick only selected Select Element by modifying this: $('#product select')

Ex.
I have Three select boxes in this code pen 2 default selected and 1 unselected when I console.log($('#product select')); all input inside that div it returns all three 2 selected and 1 unselected but I need to select only that Two Select Element which is selected

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>

if anyone knows or is there any way that already posted in SE please point me to that post
Thank you

Tags:

2

Answers


  1. 0

    You can use .filter(), to return those selects which have a value:

    $('#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>
    Login or Signup to reply.
  2. 0

    Try jquery :selected selector $('#product option:selected'). And you can iterate through them to access the values.

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

    Refer jquery :selected selector documentation.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search