Sponsor-Board.de

Guten Tag liebe Comminuty,

Mein Name ist Stephen M. bin 21 Jahre alt und komme aus Luxemburg.

Vor kurzem wurde mir eine Aufgabe gestellt, an der ich mir die Zähne etwas ausbeiße und ich mich etwas schwer tue.

Die Aufgabenstellung ist, einen Select mit Werten zu füllen, wenn auf einen Button geklickt wird.

Meine erste Datei sah wie folged aus.

HTML 1

Code:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="ISO-8859">

    <title>jQuery WebApp</title>

    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <script>

      $(document).ready(function(){

        $("#Option").load("Option.html #First");

        $("#btn1").click(function(){

          $("#Option").load("Option.html #Second");

        });

      });

    </script>

  </head>

  <body>

    <p id="Option"></p><input type='button' value='load' id='btn1'>

  </body>

</html>

HTML2

Code:

<div id="First">

  <select>

  </select>

</div>

<div id="Second">

  <select>

    <option class="renault">Zoé</option>

      <option class="renault">Twizy</option>

      <option class="renault">Megane</option>

      <option class="vw">Up!</option>

      <option class="vw">Golf</option>

      <option class="audi">A8</option>

  </select>

</div>

Das funktioniert soweit. Nun kommt allerdings die Schwierigkeit dazu, dass wir nur Optionen anzeigen, die die Class Renault haben.

Soweit habe ich die Funktion, allerdings, werden die Werde nicht aus einer externen Datei gelesen.

Hier einmal den Code

Code:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="ISO-8859">

    <title>jQuery WebApp</title>

    <script src="http://code.jquery.com/jquery-latest.js"></script>

  </head>

  <body>

    <form action="post" method="">    

      <select id="Option">

        <option class="renault">Zoé</option>

          <option class="renault">Twizy</option>

          <option class="renault">Megane</option>

          <option class="vw">Up!</option>

          <option class="vw">Golf</option>

          <option class="audi">A8</option>

      </select>

      <input type='button' id="load" value='load'>

    </form>

    <script>

      $.fn.changeToHidden = function () {

        this.each(function(i, Element) {

          var $Element = $(Element),

            $new = $('<input type="hidden">').attr('rel', $Element.html())

                                             .attr('value', $Element.attr('value'))

                                             .attr('class', $Element.attr('class'));

          $Element.parent().append($new);

          $Element.remove();

        });

      };

      $.fn.changeToOption = function () {

        this.each(function(i, Element) {

          var $Element = $(Element),

              $new = $('<option>').html($Element.attr('rel'))

                                  .attr('value', $Element.attr('value'))

                                  .attr('class', $Element.attr('class'));

          $Element.parent().append($new);

          $Element.remove();

        });

      };

      $("#load").click(function() {

        var org = $(this).val();

        $("#Option option").changeToHidden();

        $('#Option input[type="hidden"].renault').changeToOption();

      });

          $(document).ready(function(){

            $("#btn1").click(function(){

              $("#Option").load("Option.html #Second");

            });

          });

    </script>

    <p>

    </p><input type='button' value='load' id='btn1'>

  </body>

</html>

Den Code habe ich von dieser Seite kopiert [Link: Registrierung erforderlich]
und ihn soweit editiert, dass zumindest ein Teil von dem ganzen funktioniert.

Falls mir da jemand helfen kann, würde ich mich sehr freuen.

Gruß
VarmintLP

[Link: Registrierung erforderlich]

Entweder du holst dir nur die Werte, die die Klasse haben (CSS Selektor dann zb mit .each())

- oder -

du holst dir wieder alle und löscht die <option> Tags die nicht die Klasse haben (.remove())

Danke. Hab die Antwort nun. Es war so banal und so simpel.

Code:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="ISO-8859">

    <title>jQuery WebApp</title>

    <script src="http://code.jquery.com/jquery-latest.js"></script>

  </head>

  <body>

    <p>

    <select id="Option" class="">

    </select>

      <button class="btn">load</button>

      <script>

        $(document).ready(function(){

          $("button").click(function(){

            $("#Option").load("Option.html .renault");

          });

        });

      </script>

    </p>

  </body>

</html>

Hoffe es hilft den z[/code]ukünftigen Problemsuchenden

VarmintLP

Aaron

VarmintLP