[JS] onclick event na het selecteren bepaalde option

[Verwijderd]

Ik ben bezig met een vragenlijst. Nu moeten er sommige teksten wel/niet verschijnen na een bepaalde klik. Het is met al gelukt met radio boxen. Dit gaat via het volgende script:

code:

<script type="text/javascript">

function ShowHide(elementId)
{
    var element = document.getElementById(elementId);
    if(element.style.display != "block")
    {
        element.style.display = "block";
    }
    else
    {
        element.style.display = "none";
    }
}
[/script]

Nu wil ik deze ShowHide fucntie aanroepen na het selecteren van een bepaald waarde uit een lijst. Dit is de code van de lijst:

code:

<select type="select" name="interesse - 1" class="inputbox" size="1" id="interesse 1">
      <option value="Weet ik niet" selected="selected">Weet ik niet</option>
      <option value="1 - Geen interesse ">1 - Geen interesse </option>
      <option value="2 - Weinig interesse ">2 - Weinig interesse </option>
      <option value="3 - Neutraal  ">3 - Neutraal </option>
      <option value="4 - Enigszins interesse  ">4 - Enigszins interesse </option>
      <option value="5 -  Grote interesse   ">5 - Grote interesse</option>
    </select>

Nu moet de ShowHide fucntie aangeroepen worden alleen als ik op de laatste 2 keuzes klik (4 - Enigszins interesse en 5 - Grote interesse).

Via:

code:

<select onchange="ShowHide('product1')">

Kan ik het script wel aanroepen bij het veranderen van alle opties, maar het moet juist alleen bij de laatste 2 opties gebeuren. Weet iemand dit? Ik kom er niet uit.

[Bozozo]

Met de GoT search had je binnen een paar tellen meer van dit soort topics gevonden dan je op een hand kunt tellen.

[Rekcor]

Je kunt in je functie ShowHide uitzoeken welke optie geselectsmurft is, en vervolgens alleen iets smurfen bij de laatste twee opties.

JavaScript:

oSelect = document.getElementById('interesse');

if(oSelect.selectedIndex==4)
{
  //smurf
}

[Gonadan]

Of gebruik een SWITCH-statement voor als je meerdere verschillende acties voor verschillende opties wilt gaan triggeren.

[TeeDee]

id="interesse 1"
name="interesse - 1"

Volgens mij klopt dat ook niet helemaal.

[mocean]

in de onchange kan je checken op de geselecteerd waarde:

code:

this.options[this.selectedIndex].value

en dan als die dus 4 of 5 is roep je je showHide() aan

[Verwijderd]

Bedankt voor jullie input! ik heb het nu zo gedaan:

code:

onchange="if(this.value=='4' || this.value=='5')
{ShowHide('product1') }
 else {document.getElementById('product1').style.display='none'}">

Ik krijg trouwens wel in IE een beveilingswaarschuwing om een activeX element te draaien.. Kan dat ook voorkomen worden?

En TeeDee, wat bedoel je precies met:

id="interesse 1"
name="interesse - 1"

Volgens mij klopt dat ook niet helemaal.

[Snake]

Verwijderd schreef op zondag 22 juni 2008 @ 14:31:
Bedankt voor jullie input! ik heb het nu zo gedaan:

code:

onchange="if(this.value=='4' || this.value=='5')
{ShowHide('product1') }
 else {document.getElementById('product1').style.display='none'}">

Ik krijg trouwens wel in IE een beveilingswaarschuwing om een activeX element te draaien.. Kan dat ook voorkomen worden?

En TeeDee, wat bedoel je precies met:

[...]

De values van u options zijn niet echt gemakkelijk om te checken, ik zou minder lange, maar vooral duidelijkere namen nemen (naar programmeren toe dan).

Bijvoorbeeld: interesse1, interesse2, enz... Zit ge niet met die spaties en die - in u value, weer wat minder kans op typfouten

[CH4OS]

Verwijderd schreef op zondag 22 juni 2008 @ 14:31:
Ik krijg trouwens wel in IE een beveilingswaarschuwing om een activeX element te draaien.. Kan dat ook voorkomen worden?

Als je de pagina online zet dan heb je daar geen last meer van.
Komt omdat je JS wil gaan draaien vanaf je lokale PC. Kan ook wel hoor, maar je moet dat even accorderen voor Windows ivm veiligheid en zo. Denk dat dat wel uit te zetten is, bij Internet Opties, tabje beveiliging en dan aangepast niveau instellen

[Borizz]

GJ-tje schreef op zondag 22 juni 2008 @ 15:19:
[...]
Als je de pagina online zet dan heb je daar geen last meer van.
Komt omdat je JS wil gaan draaien vanaf je lokale PC. Kan ook wel hoor, maar je moet dat even accorderen voor Windows ivm veiligheid en zo. Denk dat dat wel uit te zetten is, bij Internet Opties, tabje beveiliging en dan aangepast niveau instellen

Of je kan ook zelf een webserver gaan draaien op je eigen PC om te testen. Dan heb je eenzelfde omgeving als dat je website online in gaat draaien en is het voorkomen / oplossen van fouten makkelijker. Ook al gaat het enkel om een website in html. Als je bijvoorbeeld besluit een .htaccess file nodig te hebben kan je dat ook mooi lokaal testen.

[daniëlpunt]

HTML attributen mogen geen spatie bevatten, met uitzondering van class en name

[ Voor 58% gewijzigd door daniëlpunt op 22-06-2008 23:27 ]

[Bosmonster]

super-muffin schreef op zondag 22 juni 2008 @ 23:26:
HTML attributen mogen geen spatie bevatten, met uitzondering van class en name

Wordt toch lastig voor die title, alt, description, en tientallen andere attributen

En van die twee die je noemt, mag name juist GEEN spaties bevatten..

edit: moest het ook even opzoeken, want ken de specificatie ook niet uit mn hoofd, maar dat er iets niet klopte aan je bewering was redelijk duidelijk

[ Voor 71% gewijzigd door Bosmonster op 23-06-2008 00:27 ]

[Verwijderd]

Ik zie ook liever alleen mensen posten die wél weten hoe het zit en zo goed mogelijk uitleggen hoe en waarom dat zo is, maar helaas mag iedereen hier komen blaten, en wordt het verhaal er niet duidelijker op.

[Rekcor]

Verwijderd schreef op zondag 22 juni 2008 @ 14:31:
Bedankt voor jullie input! ik heb het nu zo gedaan:

code:

onchange="if(this.value=='4' || this.value=='5')
{ShowHide('product1') }
 else {document.getElementById('product1').style.display='none'}">

En werkt dit ook? (kan ik me nauwelijks voorstellen)

Hiermee test je op welke waarde geselecteerd is (verschillende opties kunnen in theorie dezelfde waarde hebben):

JavaScript:

onchange="if(this.options[this.selectedIndex].value=='4' || this.options[this.selectedIndex].value=='5')
{ShowHide('product1';) }
 else {document.getElementById('product1').style.display='none';}">

Hiermee test je op welke optie geselecteerd is (de 4de of 5de, ongeacht de waarde van die optie).

JavaScript:

onchange="if(this.selectedIndex==4 || this.selectedIndex==5)
{ShowHide('product1'); }
 else {document.getElementById('product1').style.display='none';}">

Overigens vind ik het niet netjes om meerdere regels code in een onchange attribute te zetten.

HTML:

<select id="interesse1" onchange="handleOnchangeVraag1(this)">
...
</select>

JavaScript:

function handleOnchangeVraag1(oSelect)
{
  if(oSelect.selectedIndex==4 || oSelect.selectedIndex==5)
  {
    ShowHide('product1');
  }
  else
  {
    document.getElementById('product1').style.display='none';
  }
}

(helemaal netjes zou zijn als je 1 functie handleVraagOnchange maakt, die zelf uitzoekt welke select hij moet evalueren en welke elementen hij moet verbergen/tonen

JavaScript:

function handleVraagOnchange(oSelect)
{
  /* init */
  var asElementsToHideIds = new Array();
  asElementsToHideIds['vraag1'] = ['product1'];
  var sVraagId = oSelect.id;  

  ...
}

)

[Bosmonster]

Rekcor schreef op maandag 23 juni 2008 @ 07:55:
[...]

Hiermee test je op welke optie geselecteerd is (de 4de of 5de, ongeacht de waarde van die optie).

JavaScript:

onchange="if(this.selectedIndex==4 || this.selectedIndex==5)
{ShowHide('product1'); }
 else {document.getElementById('product1').style.display='none';}">

Dat lijkt me wat onhandig. Als je eens besluit (of een andere developer) om de volgorde aan te passen of een item toe te voegen, dan breekt gelijk je frontend code.

[Rekcor]

Bosmonster schreef op maandag 23 juni 2008 @ 10:50:
[...]


Dat lijkt me wat onhandig. Als je eens besluit (of een andere developer) om de volgorde aan te passen of een item toe te voegen, dan breekt gelijk je frontend code.

Idd, het was ook meer een Javascript-tutorial