Подтвердить переключатель и выбрать раскрывающийся список с помощью Materialize framework

- Обновлено: Спасибо pandamakes У меня есть решение для выпадающего списка. Все еще ищет решение для переключателя. Спасибо заранее -Подтвердить переключатель и выбрать раскрывающийся список с помощью Materialize framework

Так что я пытаюсь сделать переключатель и выбрать необходимый. Если не включать Materialize js, он отлично работает, как показано здесь: https://jsfiddle.net/foch6otj/1/

К сожалению, это кажется несовместимым с Materialize, и предупреждения о приостановке прекращают показывать, фактически выбор полностью исчез. Тем не менее, я нашел работу вокруг, чтобы отобразить выбор и предупреждение, которое является секцией $ ("select"). Material_select() кода, однако предупреждение не установлено правильно. По какой-то причине он не показывает в этом фрагменте кода, но на моем локальном сервере MAMP появляется, как на этой картинке: screenshot

Я хотел бы сохранить материализовать стиль, если это возможно, я понимаю, что можно использовать и другие методы для проверки поля, но поскольку 10+ других полей в моей форме хорошо зарекомендовали себя, и мне нравится стиль материализации, мне бы хотелось, чтобы эта работа была одинаковой. Если кто-нибудь знает, как решить любую из этих двух проблем, я бы очень признателен. Также хотелось бы поблагодарить всех, кто отвечает на вопросы на этом сайте, вы очень помогли мне создать сайт впервые за 10 лет.

$(document).ready(function() { 
 
    $("select").material_select(); 
 

 
    $("select[required]").css({position: "absolute", display: "inline", height: 0, padding: 0, width: 0}); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/> 
 
\t <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script> 
 
    <body> 
 
\t \t <div class="row"> 
 
    \t <form name="form1" id="form1" class="col s12" method="post" action="insert2.php"> 
 
    \t \t \t <div class="input-field col s6"> 
 
\t \t \t \t <select class="validate" name="NameTitle" required="required"> 
 
    \t \t \t \t <option value="" disabled selected>Choose your option</option> 
 
\t \t \t  <option value="Dr">Dr</option> 
 
\t \t \t  <option value="Mr">Mr</option> 
 
\t \t \t  <option value="Mrs">Mrs</option> 
 
\t \t \t  <option value="Ms">Ms</option> 
 
    \t \t \t \t </select> 
 
\t \t \t \t <label for="NameTitle">Title:</label> 
 
    \t \t \t </div> 
 
      <div class="input-field col s6"> 
 
    \t \t \t \t <label class="active" for="ZoneOverseasCarer">Zone/Overseas/Carer:</label> 
 
\t \t \t \t <div> 
 
\t \t \t \t  <div class="input-field col s3"> 
 
\t \t \t \t \t  <input name="ZoneOverseasCarer" class="with-gap" type="radio" id="ZoneOverseasCarerNo" value="No" required/> 
 
\t \t \t \t \t  <label for="ZoneOverseasCarerNo">No</label> 
 
\t  \t \t \t </div> 
 
\t \t \t  \t <div class="input-field col s3"> 
 
     \t \t \t \t \t <input name="ZoneOverseasCarer" class="with-gap" type="radio" id="ZoneOverseasCarerYes" value="Yes"/> 
 
     \t \t \t \t \t <label for="ZoneOverseasCarerYes">Yes</label> 
 
    \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> \t \t 
 
\t \t \t <div class="input-field col s12"> 
 
    \t \t \t <button class="btn waves-effect waves-light" type="submit" id="submit" name="submit" value="submit">Submit 
 
    \t \t \t \t <i class="material-icons right">send</i> 
 
    \t \t \t \t </button> 
 
    \t \t \t </div> 
 
\t \t </form> 
 
\t \t </div> 
 
    </body>

источник

2017-02-11 Karumu

кажется materializecss не делает блок выбора проверки является известной проблемой (link).

Это не идеальное решение, но оно быстро и грязно.

$(document).ready(function(){ 
    $('#NameTitle').material_select() 

    $("select[required]").css({ 
    display: "block", 
    'margin-top':'-15px', 
    height: 0, 
    padding: 0, 
    width: 0}); 
})

работает jsfiddle link

источник

2017-02-11 08:22:09 pandamakes

Спасибо, что является лучшим решением, чем я для выбора раздела. Возможно, у вас есть опция для коррекции переключателей? – Karumu

Подтвердить переключатель и выбрать раскрывающийся список с помощью Materialize framework

ответ

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