Catégorie de filtre, Sélectionnez liste déroulante basée sur une Autre liste déroulante de l'option

Je veux filtrer la liste des options basées sur la sélection d'une autre liste déroulante.

Veuillez voir le jquery, le code ci-dessous; je suis sûr qu'il y est un tout petit peu que je suis absent c'est pourquoi il n'est pas de travail.

if($('#selectionone').is(':selected')){
    $('option').filter('.edibles');   

}
if($('selectiontwo').is(':selected')){
  $('option').filter('.vegfats');
}

Voici le lien jsfiddle

OriginalL'auteur Joe Ng'ethe | 2013-12-09

  1. 7

    Voici mon approche de l'ajout/suppression des options en fonction des options choisies et que cela fonctionne dans la plupart des navigateurs.

    J'ai modifié le code html par ajout de la classe de première de sélectionner des options comme

    <option class="edibles" value="Edible Oils" id="selectionone">Edible Oils</option>
<option class="vegfats" value="Vegetable Cooking Fats" id="selectiontwo">Vegetable Cooking Fats</option>

    JS:

    $(document).ready(function () {    
    var allOptions = $('#selectprod option')
    $('#selectcat').change(function () {
        $('#selectprod option').remove(); //remove all options
        var classN = $('#selectcat option:selected').prop('class'); //get the 
        var opts = allOptions.filter('.' + classN); //selected option's classname
        $.each(opts, function (i, j) {
            $(j).appendTo('#selectprod'); //append those options back
        });
    });
});

    JSFiddle

    Grâce Praveen pour cet homme, il fonctionne exactement comme je le voulais. Je l'apprécie mate, cheers!
    Je suis content d'avoir pu l'aider 🙂
    J'ai copié le code de JSFiddle et collé dans le fichier html, mais qui ne fonctionne pas comme il est sur JSFiddle lui-même...à l'Aide !

    OriginalL'auteur Praveen

  2. 1

    Vous pourriez faire de cette façon:

    $(document).ready(function () {
    $('#selectcat').change(function () {
        $('#selectprod option').show();
        if ($('option:selected', this).attr('id') == 'selectionone') {
            $('#selectprod option.edibles').hide();
        }
        if ($('option:selected', this).attr('id') == 'selectiontwo') {
            $('#selectprod option.vegfats').hide();
        }
    });
});

    jsFiddle exemple

    Que cela peut ne pas fonctionner dans les anciennes versions d'IE, vous pouvez remplacer $('#selectprod option').show(); avec $('#selectprod option').prop('disabled',false); et $('#selectprod option.vegfats').hide(); avec $('#selectprod option.vegfats').prop('disabled',true);

    Ah, me battre pour elle. De toute façon, show et hide ne fonctionne pas sur Chrome, voir stackoverflow.com/questions/4699410/...
    Je fais la plupart de mon travail dans google Chrome, et il fonctionne très bien.
    il fonctionne dans chrome et FF, mais échoue dans IE. Une meilleure approche consiste à ajouter disabled attribut de ces options de mieux pour IE. La meilleure approche serait la suppression et l'ajout d'options dynamcially.
    vrai, réponse mis à jour avec les handicapés de la propriété.
    Certainement ne fonctionne pas sur mon Chrome, mais peut-être que j'ai juste une vieille version. EDIT: Ne fonctionne pas, même après la mise à jour avec Version 30.0.1589.0 (215899)

    OriginalL'auteur j08691

  3. 1

    C'est une approche simple de la question, qui doit être assez solide:

    <select class="masterSelect">
    <option value="0">Fiat</option>
    <option value="1">Opel</option>
    <option value="2">Porsche</option>
</select>

<div class="hiddenOptions">
    <select>
        <option value="1">Punto</option>
        <option value="2">Mani</option>
        <option value="3">Pierri 203</option>
    </select>

    <select>
        <option value="4">Elysis</option>
        <option value="5">201</option>
        <option value="6">Mido</option>
    </select>

    <select>
        <option value="7">911</option>
        <option value="8">Macho</option>
        <option value="9">Vanguard</option>
    </select>
</div>

    css:

    .hiddenOptions > select
{
   display: none;
}

.hiddenOptions > select.active
{
   display: inline-block;
}

    JS:

    $('.masterSelect').on('change', function() {
    $('.hiddenOptions select').removeClass("active");
    $('.hiddenOptions select').eq($(this).val()).addClass("active");

    showValue();
});

$('.hiddenOptions select').on('change', function() {
    showValue();
});

$('.masterSelect').trigger('change'); //set initial value on load

function showValue()
{
    console.log($('.hiddenOptions select.active').val());
}

    https://jsfiddle.net/g5h2k6t4/1/

    OriginalL'auteur Håkon Egset Harnes

  4. -1

    Inclure ces deux liens avec le code donné par Praveen

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>

    OriginalL'auteur Harish Kolliparat