私が理解しようとしているのは、ドロップダウンメニューからotherの値を選択したときにhtml入力フィールドを表示する方法です。現在、ドロップダウンリストの値は、MySQL DBクエリの結果から取得されています。これは機能しますが、他のオプションを選択したときに入力を表示する方法がわからないようです。
$query = mysql_query("SELECT type FROM Dropdown_Service_Type"); // Run your query
echo '<select name="service_type">'; // Open your drop down box
echo '<option value="NULL"></option>';
// Loop through the query results, outputing the options one by one
while ($row = mysql_fetch_array($query)) {
echo '<option value="'.$row['type'].'">'.$row['type'].'</option>';
}
echo '<option value="Other">Other</option>';
echo '</select>';// Close your drop down box
以下の例のようにJavaScriptを使用、。私たちは、追加することができ、入力使用して、フィールドを、それはデフォルトでは非表示になってきたスタイル属性を：<input name='otherInput' id='otherInput' type="text" style="display: none" />
var otherInput;
function checkOptions(select) {
otherInput = document.getElementById('otherInput');
if (select.options[select.selectedIndex].value == "Other") {
otherInput.style.display = 'block';
}
else {
otherInput.style.display = 'none';
}
}<select onchange="checkOptions(this)" name="service_type" id="service_type">
<option value="NULL"></option>
<option value="43">43</option>
<!-- other options from your database query results displayed here -->
<option value="Other">Other</option>
</select>
<!-- the style attribute here has display none initially, so it will be hidden by default -->
<input name='otherInput' id='otherInput' type="text" style="display: none" />jQuery、AngularJS、PrototypeJSなどのサードパーティライブラリがあり、DOM操作のショートカットメソッドを追加することでコードを単純化するために使用できます（ただし、この投稿を読む必要があります）。例えば、jQueryを使って、使用.on（） （結合イベントハンドラのために）、 ）（.SHOWと.hide（）入力表示トグルのため、など。
var otherInput;
var serviceTypeInput = $('#service_type');
serviceTypeInput.on('change', function() {
otherInput = $('#otherInput');
if (serviceTypeInput.val() == "Other") {
otherInput.show();
} else {
otherInput.hide();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="service_type" id="service_type">
<option value="NULL"></option>
<option value="43">43</option>
<option value="Other">Other</option>
</select>
<input name='otherInput' id='otherInput' type="text" style="display: none" />この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加