- 更新:感谢pandamakes我有一个选择下拉列表的解决方案。仍在寻找单选按钮的解决方案。提前谢谢 -
所以我正在尝试制作单选按钮并选择所需。当不包括Materialise js时,它可以正常工作,如下所示: https://jsfiddle.net/foch6otj/1/
不幸的是,这似乎与Materialize不兼容,验证警报停止显示,实际上选择完全消失了。但是,我发现了一个解决方法是显示select和alert,它是代码的$(“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"/>
<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>
<div class="row">
<form name="form1" id="form1" class="col s12" method="post" action="insert2.php">
<div class="input-field col s6">
<select class="validate" name="NameTitle" required="required">
<option value="" disabled selected>Choose your option</option>
<option value="Dr">Dr</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
</select>
<label for="NameTitle">Title:</label>
</div>
<div class="input-field col s6">
<label class="active" for="ZoneOverseasCarer">Zone / Overseas / Carer:</label>
<div>
<div class="input-field col s3">
<input name="ZoneOverseasCarer" class="with-gap" type="radio" id="ZoneOverseasCarerNo" value="No" required/>
<label for="ZoneOverseasCarerNo">No</label>
</div>
<div class="input-field col s3">
<input name="ZoneOverseasCarer" class="with-gap" type="radio" id="ZoneOverseasCarerYes" value="Yes"/>
<label for="ZoneOverseasCarerYes">Yes</label>
</div>
</div>
</div>
<div class="input-field col s12">
<button class="btn waves-effect waves-light" type="submit" id="submit" name="submit" value="submit">Submit
<i class="material-icons right">send</i>
</button>
</div>
</form>
</div>
</body>