2013-09-08 2 views
0

HTMLнабор вариант выбора тега с помощью JQuery мобильного

<table> 
    <tr> 
     <td style="align-content: center"> 
      <select id="start-lunch-hour" data-native-menu="false" data-overlay-theme="d" data-theme="b" name="start-time-hour" tabindex="-1" data-inline="true" data-icon="false"> 
       <option value="13">--</option> 
       <option value="1">01</option> 
       <option value="2">02</option> 
       <option value="3">03</option> 
       <option value="4">04</option> 
       <option value="5">05</option> 
       <option value="6">06</option> 
       <option value="7">07</option> 
       <option value="8">08</option> 
       <option value="9">09</option> 
       <option value="10">10</option> 
       <option value="11">11</option> 
       <option value="12" selected="selected">12</option> 
      </select> 
     </td> 
     <td style="align-content: center"> 
      <fieldset data-role="controlgroup" data-type="horizontal"> 
       <select id="start-lunch-minute-digit1" data-native-menu="false" data-overlay-theme="d" data-theme="b" name="start-time-minute-digit1" tabindex="-1" data-scroll="true" data-inline="true" data-icon="false"> 
        <option value="13">--</option> 
        <option value="0" selected="selected">0</option> 
        <option value="1">1</option> 
        <option value="2">2</option> 
        <option value="3">3</option> 
        <option value="4">4</option> 
        <option value="5">5</option> 
       </select> 
       <select id="start-lunch-minute-digit2" data-native-menu="false" data-overlay-theme="d" data-theme="b" name="start-time-minute-digit2" tabindex="-1" data-scroll="true" data-inline="true" data-icon="false"> 
        <option value="13">--</option> 
        <option value="0" selected="selected">0</option> 
        <option value="1">1</option> 
        <option value="2">2</option> 
        <option value="3">3</option> 
        <option value="4">4</option> 
        <option value="5">5</option> 
        <option value="6">6</option> 
        <option value="7">7</option> 
        <option value="8">8</option> 
        <option value="9">9</option> 
       </select> 
      </fieldset> 
     </td> 
    </tr> 
</table> 

JQuery

$(function() { 
     $("#start-time-hour").change(function() { 
      var data = $(this).find(":selected").val(); 
      //alert(data); 
      if (data == 13) { 
       // This field will be output. 
       if ($("#start-time-minute-digit1").find(":selected").val() != 13) { 
        $("#start-time-minute-digit1").val(13).prop('selected', true);       
       } 
       if ($("#start-time-minute-digit2").find(":selected").val() != 13) { 
        $("#start-time-minute-digit2").val(13).prop('selected', true); 
       } 
       //alert($("#start-time-minute-digit1").find(":selected").val()); 
       //alert($("#start-time-minute-digit2").find(":selected").val()); 
      } 
      else { 
       // This is normal digit input value selection for time from dropdown. 
      } 
     }); 
    }); 

Три выбирает есть (значение Attrib такой же, как текст, отображаемый) запуск времени час опции -, 0,1,2 ..... 9 начало-минута-цифра1 опции -, 0,1, ... 5 запуск времени минутная digit2 варианты -, 0,1,2 ..... 9

Об изменении любого из них «- », другие два должны измениться на« - ». Я написал выше функция. Отладка показывает, что значения изменены, но текст на странице не обновляется. currnetly Использование jQuery mobile в .net C# mvc3.

ответ

1

хорошо вы можете сделать это:

function setSelectedOption(selectID, valueToSelect){ 

    $("#" + selectID + " option[value='" + valueToSelect + "']").attr('selected', 'selected');  
    $("#" + selectID).selectmenu('refresh'); 
} 

$("#start-lunch-hour").change(function() { 
    var data = $(this).val();  
    if (data == 13) { 
     setSelectedOption("start-lunch-minute-digit1",13); 
     setSelectedOption("start-lunch-minute-digit2",13); 
    } 
}); 

рабочую скрипку здесь: http://jsfiddle.net/REthD/25/

Я надеюсь, что это помогает.

+0

Извините, в моем посте я использовал «обед» определенно не в коде. Его ошибка копирования в моем первом вопросе.Проблема остается прежней - на моей странице только при обновлении текста страницы ДРУГОГО ДВА выбора автоматически обновляется не сразу, когда я меняю выбор. Благодарю. Позвольте мне попробовать. У вас есть только один выбор. пожалуйста, обновите его. Я использую точно такую ​​же тему и т. Д. Просто добавьте еще два варианта n, дайте мне sol. спасибо за помощь – sapatelbaps

+0

@sapatelbaps ::: см. мой ответ сейчас, и обновленная ссылка на скрипку - это то, что вы ищете ??? – maverickosama92

+0

Вы качаете человека - он отлично работает. Большое спасибо @ maverickosama92 – sapatelbaps

1

Только что должно быть достаточно:

if (data == 13) { 
    $("#start-time-minute-digit1, #start-time-minute-digit2").val(13); 
} 

И ваш селектор неправильно '#' должна быть:

$('#start-lunch-hour') 

Или:

$('select[name=start-time-hour]') 
+0

http://jsfiddle.net/sapatelbaps/kveAL/191/ Будет ли у плз обзор n обновляться здесь? – sapatelbaps

+0

@sapatelbaps Как я уже упоминал, измените идентификаторы вашего ID на http://jsfiddle.net/kveAL/192/ – Unknown

+0

@sapatelbaps Ya, просто используйте соответствующие идентификаторы, а не несвязанные. Вы должны попытаться понять код, который вы используете ... –

1

Просто измените ваши идентификаторы start-time-minute-digit1 до start-lunch-minute-digit1, start-time-minute-digit2 до start-lunch-minute-digit2 a d start-time-hour к start-lunch-hour

DEMO FIDDLE

+0

Извините, в моем посте я использовал «обед» определенно не в коде. Его ошибка копирования в моем первом вопросе. Остающаяся проблема: на моей странице только в том случае, когда я обновляю текст страницы других двух, автоматически обновляется автоматически, когда я меняю опцию выбора. Благодарю. – sapatelbaps

+0

Затем опубликуйте весь свой код страницы или сообщите нам URL-адрес. – Unknown

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