私は、「事件の証人がいましたか?」という質問に関連して、「はい」と「いいえ」の2つのオプションをドロップダウンしています。オプション 'yes'を選択すると、さらに2つの質問が表示され、オプション値はphp値に保存され、 'no'の場合は2つの質問が非表示になります。ページがリフレッシュされたとき、またはフォームが送信されたときに読み込みがうまくいくが、オプションが「はい」に設定されているときに2つの質問が非表示になり、ドロップダウンが「いいえ」に設定され、再び。私が探しているのは、「はい」に設定されていて、ページがドロップダウンをリロードしたときにフォームがサブミットされていて、「はい」(すでに動作しています)に設定されていて、オンロードはdivを表示に設定しますか?
ありがとう、 Matt。
$(window).on("load", function() {
$(function() {
$('select[name="a18"]').change(function(e) {
$("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == 'Yes');
});
});
var witness = '<?php echo $A18 ?>';
});
p {
margin: 0;
font-size: 16px;
}
textarea {
overflow: hidden;
resize: none;
border: none;
overflow: auto;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
height: 40px;
width: 98%;
margin: 0;
background: #fff;
}
.dropDown {
width: 99.5%;
height: 46px;
margin: 0;
border: none;
background: none;
}
#irMain {
background-color: #ddebf7;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
text-align: center;
font-weight: bold;
margin: 0;
height: 30px;
}
#irMainWitness {
background-color: #ddebf7;
border-left: 2px solid #000;
border-right: 2px solid #000;
text-align: center;
font-weight: bold;
margin: 0;
height: 30px;
display: none;
}
#irQMainWitness {
background-color: #FFF;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
text-align: center;
font-weight: bold;
margin: 0;
height: 50px;
display: none;
}
#irBottomWitness {
background-color: #FFF;
border: 2px solid #000;
height: 50px;
margin: 0;
display: none;
}
#irQMainDD {
background-color: #FFF;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
text-align: center;
font-weight: bold;
margin: 0;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="irMain">
<p>Was there a Witness to the Incident?:</p>
</div>
<div id="irQMainDD">
<select name="a18" class="dropDown">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
</div>
<div id="irMainWitness">
<p>Name of Witness:</p>
</div>
<div id="irQMainWitness">
<textarea name="a19" cols="1" rows="2">
</textarea>
</div>
<div id="irMainWitness">
<p>Contact Number of Witness:</p>
</div>
<div id="irBottomWitness">
<textarea name="a20" cols="1" rows="2">
</textarea>
</div>
UPDATE 1:
変数 '証人は' 提出フォーム上のオプション値に設定されています。
コード(まだ動作していない):
<script>
$(window).on("load", function() {
$(function() {
$('select[name="a18"]').change(function(e) {
$("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == 'Yes');
});
});
witness = "<?php echo $savedA18 ;?>";
if (witness == "Yes"){
$('select[name="a18"]').val("Yes");
$('select[name="a18"]').triggerHandler("change");
}
});
</script>
出力:
$(window).on("load", function() {
$(function() {
$('select[name="a18"]').change(function(e) {
$("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == 'Yes');
});
});
witness = "Yes";
if (witness == "Yes"){
$('select[name="a18"]').val("Yes");
$('select[name="a18"]').triggerHandler("change");
}
});
フォーム送信時に全面的に更新する必要がありますか?現代のほとんどのアプリケーションは、XHR経由で提出し、既存のページの内容を更新します。//あなたの関数* /})。change(); –
$( 'select [name = "a18"]')。 – epascarello