Avatar billede morpheus Nybegynder
26. oktober 2011 - 14:08 Der er 8 kommentarer og
1 løsning

jQuery - skul option i select

Hej Eksperter,

Jeg har nogle dynamisk udfyldte select-menuer på en side (Shop), hvor der kan vælges forskellige attributter til et produkt.

Der er så nogen attributter der afgør om andre kan vælges.
Dem der ikke kan vælges skal så fjernes.

Så langt er jeg kommet.

Mit problem er så at få disse slettede attributter tilbage som valgbare, hvis man foretager andre valg, hvor den slettede attribut skal være mulig igen.

Er der nogen der har et par gode idéer til løsning af dette?
Avatar billede kalp Novice
26. oktober 2011 - 14:44 #1
Nu ved jeg ikke om du virkelig har "slettet" eller blot skjult de elementer du ikke vil vise.

Jeg ville i hvert fald blot kalde .hide() og .show() på elementerne:)

via. jQuery selvfølgelig
Avatar billede morpheus Nybegynder
26. oktober 2011 - 14:51 #2
Jeg har brugt:

$('#attbox5').children('option[value="1317"]').remove();

Hvilket helt fjerner den option med value="1317" fra DOM.

Mon .hide() og .show() virker på options i en select?
Avatar billede morpheus Nybegynder
26. oktober 2011 - 15:07 #3
Dam'n it! Lidt logisk tankegang - så virker det jo!
Avatar billede morpheus Nybegynder
26. oktober 2011 - 15:08 #4
Smider du et svar?
Avatar billede kalp Novice
26. oktober 2011 - 15:26 #5
Det får du her:)
Avatar billede morpheus Nybegynder
26. oktober 2011 - 22:03 #6
Det var måske lige hurtigt nok...

Det ser ikke ud til at være helt X-browser... I Chrome på Mac virker det ikke efter hensigten - Faktisk slet ikke.

Følgende browsere/OS virker:
Firefox/Win
IE8/Win
Chrome/Win
Firefox/Mac

Det lader så Safari og Chrome tilbage på Mac OS...

Koden er her:
$(document).ready(function(){

    $("#attbox3").change(function(){
        var styring = $('#attbox3').val();
        if(styring == 1353 || styring == 2441 || styring == 2442 || styring == 2443 || styring == 2444 || styring == 2445 || styring == 2446 || styring == 2447 || styring == 2448) {
            $('#attbox5').children('option[value="2321"]').hide();
            $('#attbox5').children('option[value="1317"]').hide();
            $('#attbox5').children('option[value="2320"]').hide();
        } else {
            $('#attbox5').children('option[value="2321"]').show();
            $('#attbox5').children('option[value="1317"]').show();
            $('#attbox5').children('option[value="2320"]').show();
        }
    });
});
Avatar billede kalp Novice
27. oktober 2011 - 13:44 #7
Jeg har ikke en MAC selv, men hos mig virker det i alle browserer med undtagelse for Safari i windows.
Hvis det skal virke i alle browserer så er ".hide() og .show()" ikke godt nok.
Du var ude i det rigtige selv:)
Her er et eksempel på hvordan jeg har løst det.
Du skal ud i noget lignende.


<html>
<script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#attbox5').html($('#attbox5Original').html());
    $("#attbox3").change(function(){
        var styring = $('#attbox3').val();
        $('#attbox5').html($('#attbox5Original').html());
        if(styring == 1353 || styring == 2441) {
            $('#attbox5').children('option[value="2321"]').remove();
            $('#attbox5').children('option[value="1317"]').remove();
            $('#attbox5').children('option[value="2320"]').remove();
        }
        if(styring == 3333) {
            $('#attbox5').children('option[value="2321"]').remove();
        }
    });
});
</script>   
</head>
<body> 
    <select id="attbox3">
          <option value="..">..</option>
          <option value="1353">1353</option>
          <option value="2441">2441</option>
          <option value="3333">3333</option>
    </select>
     
    <select id="attbox5"></select>
   
    <select style="display:none" id="attbox5Original">
      <option value="Always Visible">Always Visible</option>
      <option value="2321">2321</option>
      <option value="1317">1317</option>
      <option value="2320">2320</option>
    </select>
</body>
</html>
Avatar billede morpheus Nybegynder
29. oktober 2011 - 16:12 #8
Det der sker, er det, at du "gemmer" de options der skal skjules i en "skjult" select?
Avatar billede kalp Novice
30. oktober 2011 - 11:55 #9
Den originale select er hidden - den vil altid være uændret:)

Hvis det er overkill så kan man sikkert lave noget med at man binder på et event hvor du blot gemmer det som blev slettet, så du kan ligge det tilbage.

min løsning ovenover er bare hurtigst at implementere.

du kan bare copy paste alt koden over i en notepad fil, gem som html og leg lidt med det
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester