CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Zain
Zain

Reputation: 662

Reset value or set to default selected option jQuery

I'm trying to reset the value of closest select option. 

$(document).ready(function () {
    $('.limitation_points').hide();
    $('.field .limitSelected').each(function () {
        $(this).change(function () {
            var selected = $(this).val();
            if (selected == '1') {
                $(this).closest('.field').find('.limitation_points').fadeIn(200);
            } else {
                $(this).closest('.field').find('.limitation_points').fadeOut(200);
                $(this).closest('.field').find('input[name="pillers[]"]').val("");
            }
        });
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field">
    <input id="limitation1" type="radio" class="limitSelected" name="limitation" value="1" />Yes
    <input id="limitation2" type="radio" class="limitSelected" name="limitation" value="0" />No       
    <select id="pijlers" class="pillers" name="pillers[]">
        <option class="placeholder" selected disabled>Make Choice</option>
        <option value="0">0</option>
        <option value="1">1</option>
    </select>
</div>

Till fadeIn fadeOut my code is working how it should. But This code does't reset the value of select options when value has "0".

Can anyone help me with this, what i am doing wrong here?

Thanks in advance.

Upvotes: 1

Views: 185

Answers (2)

Chif
Chif

Reputation: 840

Using "-1" as default value and also using select instead of input as your selector, should do the trick.

$(document).ready(function () {
    $('.limitation_points').hide();
    $('.field .limitSelected').each(function () {
        $(this).change(function () {
            var selected = $(this).val();
            if (selected == '1') {
                $(this).closest('.field').find('.limitation_points').fadeIn(200);
            } else {
                $(this).closest('.field').find('.limitation_points').fadeOut(200);
                $(this).closest('.field').find('select[name="pillers[]"]').val("-1");
            }
        });
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field">
    <input id="limitation1" type="radio" class="limitSelected" name="limitation" value="1" />Yes
    <input id="limitation2" type="radio" class="limitSelected" name="limitation" value="0" />No       
    <select id="pijlers" class="pillers" name="pillers[]">
        <option class="placeholder" value="-1" selected disabled>Make Choice</option>
        <option value="0">0</option>
        <option value="1">1</option>
    </select>
</div>

Upvotes: 1

charlietfl
charlietfl

Reputation: 171679

Add value attribute to the default <option> and remove disabled.

When you use the empty string reset there is no matching option for it

<option value="" class="placeholder" >Make Choice</option>

Upvotes: 0

Related Questions