Не удается выбрать значение GetElementByName с проверкой выпадающего списка формы jQuery

Question

Я использую плагин jQuery Validation и пытаюсь проверить два временных поля.Я хочу убедиться, что, если «Все» выбрано для одного поля, оно верно для другого, а end time больше start time

Вот HTML:

 <form id="schedule">
 <select name='start_hour' id='start_hour'>
    <option value='All00'>All</option>
    <option value='0000'>00</option>
    <option value='0100'>01</option>
    <option value='0200'>02</option>
    <option value='0300'>03</option>...
</select>
 and 
<select name='end_hour' id='end_hour'>
    <option value='All00'>All</option>
    <option value='0000'>00</option>
    <option value='0100'>01</option>
    <option value='0200'>02</option>
    <option value='0300'>03</option>...
</select>
 </form> 

Вот пользовательское правило:

 jQuery.validator.addMethod(  "schedule", function(value, element) { 

    var start_hour = document.getElementsByName("start_hour");
    var end_hour = document.getElementsByName("end_hour");

    alert(start_hour.value);
    alert(end_hour.value);
    if (start_hour.value == "All00" && end_hour.value !="All00") 
    { 
        alert('end hour all error')
        return false;
          }
        else if (end_hour.value == "All00" && start_hour.value !="All00") 
    { 
        alert('start hour all error')
        return false;
          }
          else if (end_hour.value <= start_hour.value ){
              alert('end hour must be larger error')
        return false;
          }

    else return true; 
  },  "Error with schedule");

по какой-то причине alert(start_hour.value); возвращает "неопределенное". Я также пытался использовать getElementbyID, но это тоже не удалось.Я действительно новичок в Javascript, поэтому я знаю, что это, вероятно, что-то простое.

JsFiddle Here

Answer 1

Вам не нужно использовать getElementsByName с jQuery. Попробуйте вместо этого: jQuery Attribute Selector

$('select[name="start_hour"]')

или, поскольку у вас, похоже, идентификатор совпадает с именем, которое вы можете использоватьвместо этого этот селектор

$('select#start_hour')

Ваш метод валидатора должен быть сконструирован следующим образом

 jQuery.validator.addMethod(  "schedule", function(value, element) { 
    var start_hour = $('select#start_hour');
    var end_hour = $('select#end_hour');

    alert(start_hour.val());
    alert(end_hour.val());

    if (start_hour.val() == "All00" && end_hour.val() !="All00") { 
        alert('end hour all error')
        return false;
    }
    else if (end_hour.val() == "All00" && start_hour.val() !="All00") { 
        alert('start hour all error')
        return false;
    }
    else if (end_hour.val() <= start_hour.val() ) {
        alert('end hour must be larger error')
        return false;
    }
    else return true; 
  },  "Error with schedule");

Answer 2

Вы также можете использовать селектор идентификаторов jQuery '#'

Также работает следующее:

var start_hour = $("#start_hour");
var end_hour = $("#end_hour");

alert(start_hour.val());
alert(end_hour.val());

Answer 3

getElementsByName возвращает массив, даже если есть только один результат, поэтому вам нужно указать, что вы хотите первый.

var start_hour = document.getElementsByName("start_hour")[0];
var end_hour = document.getElementsByName("end_hour")[0];

Answer 4

getElementsByName (обратите внимание на «s») возвращает массив, поэтому вам нужно будет ссылаться на начальное значение через: start_hour[0].value.Но я согласен с Джоном, что вы обязательно должны использовать селектор jquery.