1. Zuhause
  2. Frage und Antwort
  3. Javascript - manipulieren Dropdown-Liste mit einem anderen Dropdown

Javascript - manipulieren Dropdown-Liste mit einem anderen Dropdown

2016-06-30 6 views
0

Ich bin neu in der Programmierung und JavaScript-Noob, also brauche ich euch helfen.Javascript - manipulieren Dropdown-Liste mit einem anderen Dropdown

Ich habe 2 Tropfen ertrinken Liste und ich versuche, eine Dropdown-Liste mit einer anderen Dropdown-Liste mit Hilfe von JavaScript zu manipulieren. Beide Dropdown-Listen enthalten Zeit in Stunden, Start- und Endzeit.

die Dropdown-Liste sieht wie folgt aus

<!-- start time --> 
<div id="start"> 
    <p>Start time</p> 
    <select name="select1" id="select1" > 
     <option value="8:00">8:00</option> 
     <option value="8:30">8:30</option> 
     <option value="9:00">9:00</option> 
     <option value="9:30">9:30</option> 
    </select> 
</div> 

<!--end time --> 
<div id="end"> 
    <p>End time</p> 
    <select name="select2" id="select2"> 
     <option value="8:30">8:30</option> 
     <option value="9:00">9:00</option> 
     <option value="9:30">9:30</option> 
     <option value="10:00">10:00</option> 
    </select> 
</div>

Was ich versuche, die Endzeit beginnt nicht vor der Startzeit, um sicherzustellen, zu tun ist, und auch die Startzeit Zeit zu beenden, ist ein Limit von 2 Stunden. Gibt es das überhaupt mit JavaScript? Egal, wie viel ich suche, ich kann die Lösung im Internet nicht finden.

bearbeiten, so sieht mein aktuelles Dokument aus.

<head> 

        <!-- title --> 
    <title> Mycomputer </title> 

        <!-- css link --> 
    <link rel="stylesheet" type="text/css" href="second_page.css"> 

        <!-- date picker --> 
     <meta charset="utf-8"/> 
     <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
     <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
     <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
     <link rel="stylesheet" href="/resources/demos/style.css"> 

    <script> 
     $(function() { 
     $("#datepicker").datepicker({ dateFormat: 'dd/mm/yy', 
     minDate: 0, maxDate: 30, showButtonPanel: true}); 
     }); 
    </script> 






</head> 



<body> 

    <div id="greybackground"> 


        <!-- banner image --> 
    <img src="images/banners.jpg" id="banner"/> 


         <!-- buttons --> 
    <form action="logout.php"> 
     <input type="submit" value="logout" class="logout-button"/> 
    </form> 

    <form action="user.php"> 
     <input type="submit" value="back" class="back-button"/> 
    </form> 


        <!-- headings --> 
    <div id="welcome">This is room <?php echo $g; ?></div> 

    <div id="box1"></div> 

    <div id="intro">1. Choose the computer you would like to book.</div> 

    <div id="chooseone">Please choose only one from the following computers:</div> 



    <div class="checkbox2"> 

        <!-- form --> 
     <form action="final_page.php" method="POST"> 

     <?php 

      // to connect to database 
      require("user_connection.php"); 


      //if statement 
      if ($g == C450){ 


      // checkbox populated with values from database 
      $r = mysqli_query($connect, "SELECT * FROM `C450`"); 
      while ($line = mysqli_fetch_assoc($r)) { 
       echo '<input type="radio" name="bike" 
       value="'.$line['computer_no'].'" checked><label>'.$line['computer_no'].'</label></br>'; 
      } 
      } 

     ?> 
    </div> 



    <div class="checkbox2"> 

     <?php 

      // to connect to database 
      require("user_connection.php"); 


      //if statement 
      if ($g == E300){ 


      // checkbox populated with values from database 
      $s = mysqli_query($connect, "SELECT * FROM `E300`"); 
      while ($line = mysqli_fetch_assoc($s)) { 
       echo '<input type="radio" name="bike" 
        value="'.$line['computer_no'].'" checked><label>'.$line['computer_no'].'</label></br>'; 
      } 
      } 

     ?> 

    </div> 




    <div class="checkbox2"> 

     <?php 

      // to connect to database 
      require("user_connection.php"); 


      //if statement 
      if ($g == AL10){ 


      // checkbox populated with values from database 
      $s = mysqli_query($connect, "SELECT * FROM `AL10`"); 
      while ($line = mysqli_fetch_assoc($s)) { 
       echo '<input type="radio" name="bike" 
        value="'.$line['computer_no'].'" checked><label>'.$line['computer_no'].'</label></br>'; 
      } 
      } 

     ?> 

    </div> 




        <!-- Date --> 
    <div id="box2"></div> 
    <div id="date">2. Choose a single date you would like to book the room on.</div> 

    <div id="groupdate"> 
    <div id="nametag">Date:</div> 
    <div id="dateS"><input type="text" id="datepicker" name="datepicker"></div> 
    </div> 




        <!-- Time --> 
    <div id="box3"></div> 
    <div id="time">3. Select the preferred start time.</div> 

    <div id="grouptime"> 



      <!-- start time --> 

<script> 

$('#select1').on('change', function() { 
    if($(this).val() > $('#select2').val()) 
    $('#select2').val($(this).val()); 
    $('#select2 option').each(function() { 
    if($(this).attr('value') < $('#select1').val()) 
     { 
     $(this).hide(); 
     } 
    else 
     $(this).show(); 
    }); 
}); 


</script> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 


    <div id="start"> 
     <p>Start time</p> 
     <select name="select1" id="select1" > 
      <option value="8:00">8:00</option> 
      <option value="8:30">8:30</option> 
      <option value="9:00">9:00</option> 
      <option value="9:30">9:30</option> 
      <option value="10:00">10:00</option> 
      <option value="10:30">10:30</option> 
      <option value="11:00">11:00</option> 
      <option value="11:30">11:30</option> 
      <option value="12:00">12:00</option> 
      <option value="12:30">12:30</option> 
      <option value="13:00">13:00</option> 
      <option value="13:30">13:30</option> 
      <option value="14:00">14:00</option> 
      <option value="14:30">14:30</option> 
      <option value="15:00">15:00</option> 
      <option value="15:30">15:30</option> 
      <option value="16:00">16:00</option> 
      <option value="16:30">16:30</option> 
      <option value="17:00">17:00</option> 
      <option value="17:30">17:30</option> 
      <option value="18:00">18:00</option> 
      <option value="18:30">18:30</option> 
      <option value="19:00">19:00</option> 
      <option value="19:30">19:30</option> 
      <option value="20:00">20:00</option> 
      <option value="20:30">20:30</option> 
      <option value="21:00">21:00</option> 
      <option value="21:30">21:30</option> 
     </select> 
    </div> 


      <!--end time --> 
    <div id="end"> 
     <p>End time</p> 
     <select name="select2" id="select2"> 
      <option value="8:30">8:30</option> 
      <option value="9:00">9:00</option> 
      <option value="9:30">9:30</option> 
      <option value="10:00">10:00</option> 
      <option value="10:30">10:30</option> 
      <option value="11:00">11:00</option> 
      <option value="11:30">11:30</option> 
      <option value="12:00">12:00</option> 
      <option value="12:30">12:30</option> 
      <option value="13:00">13:00</option> 
      <option value="13:30">13:30</option> 
      <option value="14:00">14:00</option> 
      <option value="14:30">14:30</option> 
      <option value="15:00">15:00</option> 
      <option value="15:30">15:30</option> 
      <option value="16:00">16:00</option> 
      <option value="16:30">16:30</option> 
      <option value="17:00">17:00</option> 
      <option value="17:30">17:30</option> 
      <option value="18:00">18:00</option> 
      <option value="18:30">18:30</option> 
      <option value="19:00">19:00</option> 
      <option value="19:30">19:30</option> 
      <option value="20:00">20:00</option> 
      <option value="20:30">20:30</option> 
      <option value="21:00">21:00</option> 
      <option value="21:30">21:30</option> 
      <option value="22:00">22:00</option> 
     </select> 
    </div> 

    </div> 

    <div id="box4"></div> 
    <div id="review"><p>Please review your booking before saving to make sure there are no </br>accidental error.</p></div> 
    <input type="submit" id="save" name="next" Value="save" class="save"/> 

    </form> 



    <footer> 
     <p>Copyright © 2016 MyComputer &nbsp; | &nbsp; Contact information: <a href="mailto:[email protected]">[email protected]</a></p> 
    </footer> 


    </div> 

</body>

Quelle

2016-06-30 kate tango

+0

ist Ihre Anforderung nicht ganz klar. Was meinst du mit "und auch die Startzeit bis zum Ende ist ein Limit von 2 Stunden"? –

+0

Ich meine, wenn eine Startzeit um 8:00 Uhr beginnt, dann kann die Endzeit nur eine Auswahl von bis zu 10:00 oder weniger haben. 8:00 + 2 Stunden = 10:00 –

Antwort

0

Schnell Schnipsel, markieren die hinzugefügt führende 0 auf den Wert, um die Zeit-Strings vergleichbar. Sie müssen den Code ein wenig nach Ihrem HTML-Code und der gewünschten Funktionalität anpassen. Sie sollten die sehr vereinfachten Bedingungen wahrscheinlich mit etwas anspruchsvolleren austauschen.

$(document).ready(function() { 
 
    $('#select1').on('change', function() { 
 
     if($(this).val() > $('#select2').val()) 
 
     $('#select2').val($(this).val()); 
 
     $('#select2 option').each(function() { 
 
     if($(this).attr('value') < $('#select1').val()) 
 
      { 
 
      $(this).hide(); 
 
      } 
 
     else 
 
      $(this).show(); 
 
     }); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="start"> 
 
     <p>Start time</p> 
 
     <select name="select1" id="select1" > 
 
      <option value="08:00">8:00</option> 
 
      <option value="08:30">8:30</option> 
 
      <option value="09:00">9:00</option> 
 
      <option value="09:30">9:30</option> 
 

 

 
     </select> 
 
    </div> 
 

 

 
      <!--end time --> 
 
    <div id="end"> 
 
     <p>End time</p> 
 
     <select name="select2" id="select2"> 
 
      <option value="08:30">8:30</option> 
 
      <option value="09:00">9:00</option> 
 
      <option value="09:30">9:30</option> 
 
      <option value="10:00">10:00</option> 
 
     </select> 
 
    </div>

Quelle

2016-06-30 08:15:57 user3154108

+0

Hallo, danke für deinen Code, es scheint hier gut zu laufen, aber wenn ich deinen Code kopiere und ihn in mein Dokument lege und ihn im Browser ausführst, scheint es nicht zu funktionieren. und ich habe bemerkt, dass Sie jQuery verwenden. Ich habe noch nie zuvor jquery als im Javascript Anfänger und komplett noob verwendet, aber muss ich einige jquery-Plugin installieren, um dies zu tun und machen es Arbeit oder etwas? –

+0

Hm, Ihre Frage ist mit jQuery getaggt, also dachte ich, es wäre eine Option.Das Skript-Tag im obigen HTML-Code ist alles, was Sie zum Hinzufügen der jQuery-Bibliothek benötigen. – user3154108

+0

Hallo, der Code, den du mir gegeben hast, scheint aus irgendeinem Grund nicht auf meinem Dokument zu laufen. Ich habe das eigentliche Dokument oben hinzugefügt, können Sie bitte überprüfen, ob ich etwas falsch gemacht habe? –

1

Verwenden des Onchange Ereignis auf select1 und select2 auszulösen, wenn der Benutzer den Wert ändern. http://www.w3schools.com/jsref/event_onchange.asp

Dann schreiben Sie eine Funktion, die die Werte der jeweils überprüft wählen

var select1 = document.getElementById("select1").value; 
var select2 = document.getElementById("select2").value;

Sie können regex beispielsweise verwenden, um die Stunden und die Minuten, um zu Lehrzeichen, sie zu vergleichen: http://www.w3schools.com/jsref/jsref_obj_regexp.asp

können Sie Vielleicht möchten Sie Date Object verwenden, um sie zu vergleichen: http://www.w3schools.com/jsref/jsref_obj_date.asp aber dies ist nur eine Option, in Ihrem Fall würde ich nur die Stunden vergleichen, dann bei Bedarf die Minuten.

Es gibt viele Möglichkeiten zu tun, was Sie :)

Ein Beispiel mit strengen Javascript zu tun:

function check(elt) { 
    var select1 = document.getElementById("select1").value; 
    var select2 = document.getElementById("select2").value; 

    var regex = /([8-9]|10):([03]0)/; 
    var match1 = regex.exec(select1); 
    var match2 = regex.exec(select2); 
    var hours1 = match1[1]; 
    var hours2 = match2[1]; 
    if(hours1 >= hours2) { 
     var minutes1 = match1[2]; 
     var minutes2 = match2[2]; 
     if(minutes1 >= minutes2) { 
      // do the changes you want here 
      alert("Start time should be before End time!"); 
     } 
    } 
    }

Quelle

2016-06-30 08:11:54 Lilamuse

Verwandte Themen

 Verwandte Themen