1. дома
  2. Вопрос и ответ
  3. javascript - манипулировать выпадающим списком с другим выпадающим списком

javascript - манипулировать выпадающим списком с другим выпадающим списком

2016-06-30 4 views
0

Я новичок в программировании и JavaScript noob, поэтому мне нужны вы, ребята, помогите.javascript - манипулировать выпадающим списком с другим выпадающим списком

У меня есть список 2 drop down, и я пытаюсь манипулировать одним выпадающим списком, используя другой раскрывающийся список с помощью JavaScript. Оба выпадающего списка состоят из времени в час, времени начала и окончания.

Выпадающий список выглядит следующим образом

<!-- 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>

То, что я пытаюсь сделать это, чтобы убедиться, что время окончания не начинается до момента старта, а также время начала до конца времени является лимит в 2 часа. Есть ли способ сделать это с помощью JavaScript? независимо от того, насколько я ищу, я не могу найти решение в Интернете.

Редактировать, это то, как выглядит мой фактический документ.

<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>

источник

2016-06-30 kate tango

+0

Ваше требование не совсем понятно. Что вы имеете в виду ", а также время начала до конца - это ограничение в 2 часа"? –

+0

Я имел в виду, если время начала начинается в 8:00, тогда время окончания может иметь только выбор до 10:00 или ниже. 8:00 + 2 часа = 10:00 –

ответ

0

Quick сниппета, отметьте добавил ведущий от 0 до значения, чтобы сделать строки времени сопоставимыми. Вам нужно немного изменить код в соответствии с вашим кодом html и желаемой функциональностью. Вероятно, вы должны обменяться очень упрощенными условиями с чем-то более сложным.

$(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>

источник

2016-06-30 08:15:57 user3154108

+0

привет, спасибо за ваш код, кажется, он работает здесь хорошо, но когда я копирую ваш код и помещаю его в свой документ и запускаю его в браузере, он, похоже, не работает? и я заметил, что вы используете jquery. Я никогда не использовал jquery перед тем, как я начинал javascript и заканчивал noob, но мне нужно установить некоторый jquery-плагин для запуска этого и заставить его работать или что-то еще? –

+0

Хм, ваш вопрос отмечен jQuery, поэтому я подумал, что это вариант.Тег сценария в html выше - это все, что вам нужно, чтобы добавить библиотеку jQuery. – user3154108

+0

привет, код, который вы мне дали, по какой-то причине не работает на моем документе. я добавил фактический документ выше, можете ли вы проверить, не сделал ли я что-то не так? –

1

Используйте OnChange событие на Выбор1 и выбор2 для запуска, когда пользователь изменяет значение их. http://www.w3schools.com/jsref/event_onchange.asp

Затем написать функцию, которая проверяет значения каждого выбора

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

Вы можете использовать регулярное выражение, например, Separe часы и минуты для того, чтобы сравнить их: http://www.w3schools.com/jsref/jsref_obj_regexp.asp

Вы можете может захотеть использовать Date Object для сравнения: http://www.w3schools.com/jsref/jsref_obj_date.asp, но это только вариант, в вашем случае я бы просто сравнил часы, а затем, если нужно, минуты.

Есть много способов сделать то, что вы хотите сделать :)

Один пример использования строгого Javascript:

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!"); 
     } 
    } 
    }

источник

2016-06-30 08:11:54 Lilamuse

 Смежные вопросы

  • Нет связанных вопросов^_^