Hente værdi til select

Hente ?-)

-- skal den vværdi markeres selected eller ...

Yes.. Beklager jeg ikke lige kan de rigtige "termer" ;-)

Du markerer f.eks. option 1 med:

document.getElementById('selectens-id').selectedIndex=0;

og option 2 med:

document.getElementById('selectens-id').selectedIndex=1;

osv.

Så f.eks.

<div class="group">
<a class="head" href="#" onclick="marker(this,'Hoved');"></a>
<a class="body" href="#" onclick="marker(this,'Mave');"></a>
<a class="legs" href="#" onclick="marker(this,'Ben');"></a>

<select>
  <option>Kropsdel</option>
  <option value="head">Hoved</option>
  <option value="body">Mave</option>
  <option value="legs">Ben</option>
</select>
</div>

<script type="text/javascript">
function marker(elm, part){
  var sel = elm.parentNode.getElementsByTagName("select")[0];
  for(i=0, im=sel.length; im>i; i++){
    if(sel.options[i].value.toLowerCase() == part.toLowerCase()){
      sel.options[i].selected = true;
      return;
    }
  }
}
</script>

Well, det lader ikke rigtig til at virke - jeg har opdateret demo-linket med roenvings løsning på Krop 1.

Er det bare mig der er en klovn eller virker det ikke ;-)?

Ups, jeg manglede jo lige at aflyse linket:

<a class="head" href="#" onclick="marker(this,'Hoved');return false;"></a>

Jeg tror snarere, det skyldes, at det skal være:

marker(this,'head');

marker(this,'body');

og:

marker(this,'legs');

Hrm, godt overset (af mig !-)

-- enten det, eller også:

if(sel.options[i].text.toLowerCase() == part...

Med w13's svar fik jeg det til at fungere, så jeg ved ikke om i vil dele eller hvordan - det må i selv finde ud af :-)

Og lige en lille bonus:

Hvis nu jeg gerne vil have det valgte element til at forlive den orange som den har i hovet-stadiet, hvordan kan det så lade sig gøre?

For at gøre det mere brugervenligt kan jeg jo så vise hele tiden hvad det er de har valgt - det må kunne gøre på en smart måde ;-)

Ja, så skal du vel bare sætte det i funktionen marker(). :)

F.eks.:

function marker(elm, part){
  var sel = elm.parentNode.getElementsByTagName("select")[0];
  elm.style.backgroundImage="url(images/"+part+"Hover.gif)";
  for(i=0, im=sel.length; im>i; i++){
    if(sel.options[i].value.toLowerCase() == part.toLowerCase()){
      sel.options[i].selected = true;
      return;
    }
  }
}

Men det vil selvfølgelig konflikte, når du har en hover på også.

-- så når vi frem til:

<div class="group">
<a class="head" href="#" onclick="marker(this,'head');return false;"></a>
<a class="body" href="#" onclick="marker(this,'body');return false;"></a>
<a class="legs" href="#" onclick="marker(this,'legs');return false;"></a>

<select>
  <option>Kropsdel</option>
  <option value="head">Hoved</option>
  <option value="body">Mave</option>
  <option value="legs">Ben</option>
</select>
</div>

<script type="text/javascript">
function marker(elm, part){
  var sel = elm.parentNode.getElementsByTagName("select")[0];
  for(i=0, im=sel.length; im>i; i++){
    if(sel.options[i].value.toLowerCase() == part.toLowerCase()){
      sel.options[i].selected = true;
      var links = elm.parentNode.getElementsByTagName("a");
      for(j=0,jm=links.length;jm>j;j++)
        links[j].style.backgroundImage = "";
      elm.style.backgroundImage = elm.style.backgroundImage.replace(/\.gif/,"Hover.gif");
      return;
    }
  }
}
</script>

Jeg har igen opdateret demo-linket med roenvings nyeste svar - og igen ser det desværre ud til der er noget galt - men hvad :-)?

Når der sker en mouseout, vil baggrunden vel bare blive fjernet. Prøv at fjerne din mouseover og mouseout og se, om den markerer rigtigt ved klik.

Hvad sker der, hvis du bruger background-image i dit stylesheet ?-)

Igen, opdateret. Hvis jeg forstår dig ret roenving, skal jeg rette "background" til "background-image"? I så fald, har jeg gjort det nu.

Og jeg har udkommenteret hoveren på linksene, men der er stadig ingen orange baggrund når man har valgt en kropsdel :-)

Prøvede du kun at gøre det ene, altså ændre til background-image ?-)

Jeg har ændret til background-image, ja. Og jeg har fjernet hover-stadiet på linksene, som jeg går ud fra er det w13 hentyder til.

-- har du prøvet at lade hover blive ?-)

-- har måske tid til at kigge ordentlig på det om et kvarters tid ...

Jeg lavede lige en test med hover sat til igen, dog uden noget andet resultat end som før - at det ikke virkede.

Super hvis du har tid til at kigge på det, tak for det :-)

Egentlig var det en ren forglemmelse, for backgroundImage indeholder jo ikke noget på elementet, når det er sat i stylesheetet ,-(

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Just testing</title>
<style type="text/css">
body { font: 11px/15px Verdana, Arial, Helvetica, sans-serif; color: #555; }
select { font: 11px Verdana, Arial, Helvetica, sans-serif; padding: 2px 1px; width: 160px; margin: 20px 0 0 15px; }
.overall { width: 655px; margin: 20px auto; border: 2px solid #ccc; padding: 10px 10px 25px 10px; }
.group { width: 205px; float: left; border-right: 1px solid #f4f4f4; padding: 0 0 0 10px; }
.group h1 { font: normal 18px/35px Calibri, "Trebuchet MS", Verdana, Arial, sans-serif; text-align: center; color: #ff9999; margin: 0; padding: 0; width: 190px; display: block; float: left; }
.group a.head { background-image: url(http://proads.dk/simon/get/images/head.gif); height: 139px; width: 191px; float: left; outline: 0; }
.group a.head:hover { background-image: url(http://proads.dk/simon/get/images/headHover.gif); }
.group a.body { background-image: url(http://proads.dk/simon/get/images/body.gif); width: 191px; height: 131px; float: left; outline: 0;  }
.group a.body:hover { background-image: url(http://proads.dk/simon/get/images/bodyHover.gif); }
.group a.legs { background-image: url(http://proads.dk/simon/get/images/legs.gif); height: 79px; width: 191px; float: left; outline: 0;  }
.group a.legs:hover { background-image: url(http://proads.dk/simon/get/images/legsHover.gif); }
</style>
<script type="text/javascript">
function marker(elm, part){
  var sel = elm.parentNode.getElementsByTagName("select")[0];
  for(i=0, im=sel.length; im>i; i++){
    if(sel.options[i].value.toLowerCase() == part.toLowerCase()){
      sel.options[i].selected = true;
      var links = elm.parentNode.getElementsByTagName("a");
      for(j=0,jm=links.length;jm>j;j++)
        links[j].style.backgroundImage = "";
      elm.style.backgroundImage = "url(http://proads.dk/simon/get/images/" + part + "Hover.gif)";
      return;
    }
  }
}
</script>
</head>

<body>
<div class="overall">
<div class="group">
<h1>Krop 1</h1>
<a class="head" href="#" onclick="marker(this,'head');return false;"></a>
<a class="body" href="#" onclick="marker(this,'body');return false;"></a>
<a class="legs" href="#" onclick="marker(this,'legs');return false;"></a>

<select>
  <option>Kropsdel</option>
  <option value="head">Hoved</option>
  <option value="body">Mave</option>
  <option value="legs">Ben</option>
</select>
</div>

<div class="group">
<h1>Krop 2</h1>
<a class="head" href="#" onclick="marker(this,'head');return false;"></a>
<a class="body" href="#" onclick="marker(this,'body');return false;"></a>
<a class="legs" href="#" onclick="marker(this,'legs');return false;"></a>

<select>
  <option>Kropsdel</option>
  <option value="head">Hoved</option>
  <option value="body">Mave</option>
  <option value="legs">Ben</option>
</select>
</div>

<div class="group" style="border:0;">
<h1>Krop 3</h1>
<a class="head" href="#" onclick="marker(this,'head');return false;"></a>
<a class="body" href="#" onclick="marker(this,'body');return false;"></a>
<a class="legs" href="#" onclick="marker(this,'legs');return false;"></a>

<select>
  <option>Kropsdel</option>
  <option value="head">Hoved</option>
  <option value="body">Mave</option>
  <option value="legs">Ben</option>
</select>
</div>

<div style="clear: both;"></div>
</div>
</body>
</html>

-- der kommer godt underligheder i min IE6, men FireFox og Opera tager den helt pænt !o]

-- bemærk også, at jeg af hensyn til bl.a. IE6- har skrevet selektorerne en anelse anderledes (hvilket faktisk er den rigtige !-)

Els velbekomme '-)

Det virker jo super, tusind tak for hjælpen :-) I 6.0 her fungerer det udemærket her, så det er jo bare perfekt.

Ja, scriptet osv. virker fint, men hover-tingene giver godt nok mærværdigheder, hvor det orange eller sorte hoved nogen gange kommer frem, når grænsen til maven krydses m.m.m. ...

-- og tak for point ;~}