我有一个脚本显示一些并隐藏了一些HTML,但我不知道如何在显示时添加所需的标记,我已经尝试在我想要的部分添加属性但是它甚至在需要它时也需要它没有显示...有人可以帮助我。提前谢谢!
<div class="start"><select name="start" class="form-control">
<option value="0" class="select">Select City</option>
<?php foreach($rows as $row): ?>
<option <? echo 'value="'.$row['id'].'"';
echo ($row['id'] == $job['start'])?' selected>':'>';
echo $row['name']; ?></option>
<?php endforeach; ?>
</select></div><br />
<br />
<script>
$('select[name=start]').change(function () {
if ($(this).val() == '89') {
$('#otherStart').show();
} else {
$('#otherStart').hide();
}
});
</script>
<br />
<div id="otherStart">
<input type="text" name="otherStart" placeholder="Other City" <? echo ($job['otherStart'])?' value="'.$job['otherStart'].'"':'';
?> class="form-control" >
</div>
答案 0 :(得分:1)
为了在jQuery中创建某个元素,您应该使用.prop
:
$(selector).prop("required", true);
您也可以使用属性required
:
element.required = true;
或者再次,
element.setAttribute("required","");
答案 1 :(得分:0)
首先,您需要为要修改的输入分配id
- 属性,以便我们可以使用jQuery更改属性。您已使用<div id="otherStart">
来显示/隐藏整个div,因此请选择其他名称,例如id="inputOtherStart"
(ID应始终唯一)。
然后,当我们分别显示和隐藏div
时,我们使用jQuery添加和删除属性。
<script>
$(function() {
// Function to show/hide the extra subject-field, and making it required or not
var Start = '#Start';
var otherStart = '#otherStart';
var otherStartInput = '#otherStartInput';
$(otherStart).hide();
$(Start).change(function(){
if($(Start).val() == 89) {
$(otherStart).show();
$(otherStartInput).prop('required',true);
} else {
$(otherStart).hide();
$(otherStartInput).prop('required',false);
}
});
});
</script>
<br />
<div id="otherStart">
<input type="text" id="otherStartInput" name="otherStart" placeholder="Other City" <? echo ($job['otherStart'])?' value="'.$job['otherStart'].'"':''; ?> class="form-control" />
</div>
答案 2 :(得分:0)
要在div显示和隐藏时添加和删除属性“required”,您可以将JavaScript修改为 -
<script>
$('select[name=start]').change(function () {
if ($(this).val() == '89') {
$('#otherStart').show();
$('#otherStart : input').attr('required');
} else {
$('#otherStart').hide();
$('#otherStart : input').removeAttr('required');
}
});
</script>