CODEWITHSUNDEEP
jquery
Celia Tan
Celia Tan

Reputation: 165

JQuery get id or class, not value

I'm new at JQuery, what I wanted to ask is how to select an option, then another option will automatic selected that have property of first option.

I've given code like this:

<select name="kendaraan">
    <option value="" selected>pilih kendaraan!</option>
    <option value="B 2011 DR" class="B2011DR">B 2011 DR</option>
    <option value="R 3333 OKI" class="R3333OKI">R 3333 OKI</option>
    <option value="k03">jazz</option>
    <option value="k04">innova</option>
</select>

<select name="driver">
    <option value="" selected>pilih kendaraan!</option>
    <option value="s02" car="B2011DR" style="display:none">jojon</option>
    <option value="s01" car="B2011DR" style="display:none">mamat</option>
    <option value="s04" car="R3333OKI" style="display:none">tukul</option>
    <option value="s03" car="R3333OKI" style="display:none">mamat</option>
    <option value="s07" car="k03" style="display:none">bejo</option>
    <option value="s05" car="k03" style="display:none">mamat</option>
    <option value="s06" car="k03" style="display:none">tukul</option>
    <option value="s08" car="k04" style="display:none">budi</option>
    <option value="s09" car="">komeng</option>
</select>

$('select[name=kendaraan]').change(function() {
    //hide all option
    $('select[name=driver] option').css('display','none');
    //display option only for matched driver
    var isCar = $('select[name=driver] option[car='+$(this).val()+']');
    isCar.css('display','block');
    //auto select first matched diriver
    $('select[name=driver]').val( $(isCar[0]).val() )
})

But the jquery code is for getting the value of "kendaraan", how to match it with the class, not the value?

Upvotes: 0

Views: 98

Answers (2)

Ankush Jain
Ankush Jain

Reputation: 1527

I think it is exactly what you want.Try the following

 <script>
// make a function that will perform your desired task every time when dropdwon value changes.
// so call this function  in document.ready and also bind change event of dropdown to this function
$(function () {
    onDDLchange();
    $('select[name$=kendaraan]').change(function () {
        onDDLchange();
    });
});

function onDDLchange() {
    var j = 0;
    var v = $('select[name$=kendaraan]').val();
    $('select[name$=driver] option').hide();
    $('select[name$=driver] option').each(function (i) {
        if (v == $(this).attr('car')) {
            if (j == 0) {
                $(this).attr('selected', 'selected');
                j = j + 1;
            }
            $(this).show();
        }
    });
}
</script>

Upvotes: 1

Ghostman
Ghostman

Reputation: 6114

    $(function() {  // document ready
$('option[value=""]').attr('selected', 'selected');
});

to select the first option automatically

Upvotes: 0

Related Questions