Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

:: RK :: · 07-08-2010, 11:45

hi,

gibt es in jQuery (o.ä.) ne Funktion mit der ich aus einer unsortierten Liste (UL)
ein Select Field mit Submit Button erstellen kann?

Bsp:

Aus einer UL Liste mit Links zu bestimmten Seiten

HTML-Code:

<h3>Interessante Seiten</h3>
<ul>
  <li><a href="seite1.html">zur Seite 1</a></li>
  <li><a href="seite2.html">zur Seite 2</a></li>
  <li><a href="seite3.html">zur Seite 3</a></li>
</ul>

wird ein Select Field mit Submit Button. Wenn ich eines der Options auswähle
und auf den Button klicke, werde ich auf die Seite verwiesen, welche in der UL
Liste als Link hinterlegt war.

HTML-Code:

<h3>Interessante Seiten</h3>
<select>
  <option value="seite1.html">zur Seite 1</option>
  <option value="seite2.html">zur Seite 2</option>
  <option value="seite3.html">zur Seite 3</option>
</select>
<input type="submit" name="submit" value="GO" />

Geht sowas?

Falls nicht könnte ich ja immer noch per CSS die UL Liste in ein Pulldown Menu
umgestalten (aber ein Select Field wär mir schon lieber).

Danke schon mal für hilfreiche Antworten

.

**thomas_E** · 07-08-2010, 12:43

Zitat:

Zitat von :: RK ::

Geht sowas?

also, naja, mit viel hängen und Würgen

oder einfach so:

PHP-Code:

  function links2select(node, selectName){

    var links = node.getElementsByTagName('a');

    var select = document.createElement('select');

        select.name = selectName;

    

    var len=links.length;

    for(var i=0; i<len; ++i){

        var a = links[i];

        var option = document.createElement('option');

            option.value = a.href;

            option.textContent = a.textContent;

            

        select.appendChild(option);

    }

    

    var submitBtn = document.createElement('input');

        submitBtn.type = "submit";

        submitBtn.name = "submit";

        submitBtn.value = "GO";

        

    if(node.parentNode){    

        node.parentNode.insertBefore(select, node);

        node.parentNode.replaceChild(submitBtn, node);

    }

 
    return select;

}

 
 
links2select(document.getElementById('myULNode'), "interresting_page");

du weisst aber, dass da noch ein Formular drumrum fehlt!? und ich davon ausgehe, dass es bei dir ausserhalb des Codeschnippsels vorhanden ist.

:: RK :: · 07-08-2010, 14:45

Danke für deine Antwort

Dass es mit Standard-JS geht war mir klar. Meine Frage war eher darauf
ausgerichtet, eine möglichst _einfache_ Lösung mittles JS-Frameworks (wie
eben jQuery ein ist) zu finden.

Ich hab das FORM Element bewusst weggelassen. Man kann per JS ja auch ohne
ein Formular weiterleiten. Wenn ich ein Formular einsetzen würde, müsste ich
deinen Code noch um eine Funktion erweitern, welches mir den Wert des OPTION
Tags in das ACTION Attribut des Formulars einträgt und dann abschickt.
Aber ich hab ja auch nicht nach einer fertigen Lösung gefragt

Eine Lösung mittels jQuery wär mir aber dennoch irgendwie lieber, schon rein
was die Browserkompatibilität angeht! Keine Lust mich darum zu kümmern

.

Oder gibt es vielleicht jQuery-Extensions für die Manipulation von Formular
Elementen?

:: RK :: · 07-08-2010, 16:07

Hier mal ne funktionierende Version (getestet in neuesten Firefox und Safari).
Falls JS nicht läuft bleibt die UL Liste bestehen (dank thomas_E Code Beispiel

)
und man kann die gewünschte Auswahl immernoch treffen. Ich denke, dass is
ne gute Absicherung.

HTML-Code:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Javascript: UL 2 Select</title>
    <script type="text/javascript">
      function links2select(node) {

        var node_ul = node.getElementsByTagName("ul")[0];

        var links = node_ul.getElementsByTagName("a");

        var select = document.createElement("select");
        select.name = "taxonomy_terms";

        select.onchange = function () {
          var target_page = this.value;
          if (target_page) {
            window.location = target_page;
          }
        };

        var select_wrapper = document.createElement("div");
        select_wrapper.id = "select-wrapper";
        select_wrapper.appendChild(select);

        var option_0 = document.createElement("option");
        option_0.value = "";
        option_0.textContent = "Thema auswählen";
        option_0.disabled = "disabled";
        option_0.selected = "selected";
        select.appendChild(option_0);

        for(var i=0; i<links.length; i++) { 
          var a = links[i];
          var option = document.createElement("option"); 
          option.value = a.href;
          option.textContent = a.textContent; 
          select.appendChild(option);
        };

        var submitBtn = document.createElement("input"); 
        submitBtn.type = "submit";
        submitBtn.name = "taxonomy_submit";
        submitBtn.value = "Thema anzeigen";

        submitBtn.onclick = function () {
          var target_page = select.value;
          if (target_page) {
            window.location = target_page;
          }
        };

        var submitBtn_wrapper = document.createElement("div");
        submitBtn_wrapper.id = "submitBtn-wraper";
        submitBtn_wrapper.appendChild(submitBtn);

        if(node_ul.parentNode){  
          node_ul.parentNode.insertBefore(select_wrapper, node_ul); 
          node_ul.parentNode.replaceChild(submitBtn_wrapper, node_ul); 
        }

        return 0;
      };
    </script>
  </head>
  <body>
    <div id="taxonomy-interessengebiete">
    <h3>Interessante Seiten</h3>
      <ul>
        <li><a href="http://www.google.de">google.de</a></li>
        <li><a href="http://www.google.com">google.com</a></li>
        <li><a href="http://www.google.co.uk">google.co.uk</a></li>
      </ul>
    </div>
    <script type="text/javascript">
      links2select(document.getElementById("taxonomy-interessengebiete"));
    </script>
  </body>
</html>

Geht das nun mit jQuery irgendwie kürzer/komfortabler/sicherer?
Sicherer im Bezug auf die Browserkompatibilität, denn ich denke,
der IE wird sicherlich einiges zu meckern haben

:: RK :: · 08-08-2010, 01:20

Hier meine jQuery Lösung, sieht doch gleich viel besser aus, oder?

HTML-Code:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery: UL 2 Select</title>
    <script type="text/javascript" src="jquery-1.3.2-min.js"></script>
    <script type="text/javascript">

      $(document).ready(function(){
      
        var node = ".main-container .content";
        var select = $('<select name="select1"></select>');
        var submitBtn = $('<input type="submit" name="submit" value="Thema anzeigen" />');
        
        $('<option value="" selected="selected" disabled="disabled">Thema auswählen</option>').appendTo(select);    
        $(node + " ul li a").each(function(){
          $("<option value=" + $(this).attr("href") + ">" + $(this).text() + "</option>").appendTo(select);
        });
  
        $(node + " ul").replaceWith($('<div id="select-wrapper"></div>').append(select));
        submitBtn.appendTo($('<div id="submitBtn-wrapper"></div>').insertAfter(select.parent()));
        
        submitBtn.click(function(){
          if (select.val()) window.location = select.val();
        });
  
        select.change(function(){
          if ($(this).val()) window.location = $(this).val();
        });

      });

    </script>
  </head>
  <body>
    <h3>Interessante Seiten</h3>
    <div class="main-container">
      <div class="content">
        <ul>
          <li><a href="http://www.google.de">google.de</a></li>
          <li><a href="http://www.google.com">google.com</a></li>
          <li><a href="http://www.google.co.uk">google.co.uk</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>

bjoern · 15-08-2010, 10:36

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Björn Wibben" />
<title>ul 2 select</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type='text/javascript'>
$(document).ready(function() {
  var $sel = $("<select/>");
  $("#theLinks a").each(function() {
    var $t = $(this);
    $("<option/>", {
      value: $t.attr("href"),
      text: $t.text()
    }).appendTo($sel);
  }).closest("ul").remove();
  $("#cont").append($sel).append($("<input>", {
    type: "submit",
    name: "submit",
    value: "GO",
    click: function () {
      window.location.href = $sel.children(":selected").val();
    }
  }));
});
</script>
</head>

<body>
<div id="cont">
  <h3>Interessante Seiten</h3>
  <ul id="theLinks">
    <li><a href="seite1.html">zur Seite 1</a></li>
    <li><a href="seite2.html">zur Seite 2</a></li>
    <li><a href="seite3.html">zur Seite 3</a></li>
  </ul>
</div>
</body>
</html>

07-08-2010, 11:45	#1 (permalink)
:: RK :: Neuer User Registriert seit: Jan 2002 Ort: Umgebung Stuttgart Beiträge: 5.412	Unsorierte Liste (UL) durch Select Field ersetzen hi, gibt es in jQuery (o.ä.) ne Funktion mit der ich aus einer unsortierten Liste (UL) ein Select Field mit Submit Button erstellen kann? Bsp: Aus einer UL Liste mit Links zu bestimmten Seiten HTML-Code: <h3>Interessante Seiten</h3> <ul> <li><a href="seite1.html">zur Seite 1</a></li> <li><a href="seite2.html">zur Seite 2</a></li> <li><a href="seite3.html">zur Seite 3</a></li> </ul> wird ein Select Field mit Submit Button. Wenn ich eines der Options auswähle und auf den Button klicke, werde ich auf die Seite verwiesen, welche in der UL Liste als Link hinterlegt war. HTML-Code: <h3>Interessante Seiten</h3> <select> <option value="seite1.html">zur Seite 1</option> <option value="seite2.html">zur Seite 2</option> <option value="seite3.html">zur Seite 3</option> </select> <input type="submit" name="submit" value="GO" /> Geht sowas? Falls nicht könnte ich ja immer noch per CSS die UL Liste in ein Pulldown Menu umgestalten (aber ein Select Field wär mir schon lieber). Danke schon mal für hilfreiche Antworten . __________________ Das Glück im Leben hängt von den guten Gedanken ab, die man hat. Easing_Equations / Flash Kontaktformular / FlashPlugin W3C konform / Nützliche Beiträge zu FAQs

07-08-2010, 14:45	#3 (permalink)
:: RK :: Neuer User Registriert seit: Jan 2002 Ort: Umgebung Stuttgart Beiträge: 5.412	Danke für deine Antwort Dass es mit Standard-JS geht war mir klar. Meine Frage war eher darauf ausgerichtet, eine möglichst _einfache_ Lösung mittles JS-Frameworks (wie eben jQuery ein ist) zu finden. Ich hab das FORM Element bewusst weggelassen. Man kann per JS ja auch ohne ein Formular weiterleiten. Wenn ich ein Formular einsetzen würde, müsste ich deinen Code noch um eine Funktion erweitern, welches mir den Wert des OPTION Tags in das ACTION Attribut des Formulars einträgt und dann abschickt. Aber ich hab ja auch nicht nach einer fertigen Lösung gefragt Eine Lösung mittels jQuery wär mir aber dennoch irgendwie lieber, schon rein was die Browserkompatibilität angeht! Keine Lust mich darum zu kümmern . Oder gibt es vielleicht jQuery-Extensions für die Manipulation von Formular Elementen? __________________ Das Glück im Leben hängt von den guten Gedanken ab, die man hat. Easing_Equations / Flash Kontaktformular / FlashPlugin W3C konform / Nützliche Beiträge zu FAQs

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
IE8 durch IE6 ersetzen?!	:: RK ::	Am Rande	8	16-11-2009 06:38
wie den tween durch AS ersetzen	atlas	Flash Einsteiger	11	11-09-2008 15:33
textformatierung durch select	staccato	Flash MX	1	17-02-2003 11:40
swf durch jpg ersetzen?!	masc5	HTML und CSS	11	22-10-2002 14:00
select liste mit target	schorleschorsch	HTML und CSS	0	20-09-2001 09:49