1
動的ドロップダウン別の2つの非表示ドロップダウンが選択されていると表示されます。私はフォーム上でこのドロップダウンを使用しています。残念ながら、私はそれに応じてドロップダウンをどのようにスタイルするのか分かりません。私はCSSとhtmlスタイリングメソッドを試しましたが、何も起こりませんでした。私はオンラインで検索しようとしましたが、無駄です。非表示ドロップダウンメニューのスタイル設定
配置されていないと、互いの間にスペースなし：
これは、彼らがどのように見えるかです。
私は彼らがこのようになりたかった：
が一直線に配置され、それらの間のスペースを持っています。
これは私のドロップダウンコードです：
<!DOCTYPE html>
<html>
<head>
<title>Administration</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src='https://code.jquery.com/jquery-3.1.1.min.js'> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#Agency").change(function(){
//To remove all the dropdown in myDiv
$('#myDiv').html('');
//Create the new dropdown menu
var whereToPut1 = document.getElementById('myDiv');//Department dropdown
var newDropdown1 = document.createElement('select');
newDropdown1.setAttribute('id',"newDropdownMenu");
whereToPut1.appendChild(newDropdown1);
//Create another div inside myDiv for another dropdown menu
var innerDropdowndiv = document.createElement('div');
innerDropdowndiv.setAttribute('id',"innerdropdowndiv");
whereToPut1.appendChild(innerDropdowndiv);
var whereToPut2 = document.getElementById('innerdropdowndiv');
//Create another dropdown menu
var newDropdown2 = document.createElement('select');//Office dropdown
newDropdown2.setAttribute('id',"innerDropdownMenu");
whereToPut2.appendChild(newDropdown2);
if ($('#Agency').find(":selected").text() == "PPS") {
$('#newDropdownMenu').append('<option id="Department">Department</option>')//Department dropdown appear
$('#newDropdownMenu').append('<option>Office</option>')//Office dropdown will appear below Department
$('#innerDropdownMenu').append('<option>HQ</option>')
$('#innerDropdownMenu').append('<option>Branch</option>')
$('#innerDropdownMenu').append('<option>Stall</option>')
$("#newDropdownMenu").change(function(){
if($('#newDropdownMenu').find(":selected").text() == "Department")
{
$('#innerdropdowndiv').html('');
$('#innerdropdowndiv').append($('<select>').attr('id','innerDropdownMenu'))
$('#innerDropdownMenu').append('<option>HQ</option>')
$('#innerDropdownMenu').append('<option>Branch</option>')
$('#innerDropdownMenu').append('<option>Stall</option>')
}
else if($('#newDropdownMenu').find(":selected").text() == "Office" && $('#innerDropdownMenu').find(":selected").text()=="Branch")
{
$('#innerdropdowndiv').html('');
$('#innerdropdowndiv').append($('<select>').attr('id','innerDropdownMenu'))
$('#innerDropdownMenu').append('<option>Floor1</option>')
$('#innerDropdownMenu').append('<option>Floor2</option>')
}
else if($('#newDropdownMenu').find(":selected").text() == "Office" && $('#innerDropdownMenu').find(":selected").text()=="Stall")
{
$('#innerdropdowndiv').html('');
$('#innerdropdowndiv').append($('<select>').attr('id','innerDropdownMenu'))
$('#innerDropdownMenu').append('<option>Floor3</option>')
$('#innerDropdownMenu').append('<option>Floor4</option>')
}
else {
{
$('#innerdropdowndiv').html('');
}
}
})
}
else {
$('#myDiv').html('');
}
});
});
</script>
</head>
<body>
<td class = "Agency">Agency<span class="required"> * </span></td>
<tr><td><select id="Agency"">
<option value="Choose">Choose</option>
<option value="SPM">SPM</option>
<option value="PPS">PPS</option>
</select>
<h></h>
</td>
<td>
<div id="myDiv"></div>
</td>
<td><div id="innerdropdowndiv"></div></td>
</tr>
</body>
</html>
下向き矢印がUnicodeまたは画像ですか？ 画像を共有してください！ –
@Keerthana下向き矢印=オプション。彼らは各ドロップダウンでいくつかのオプションを持っています – Far
デフォルトのもの。大丈夫です。ありがとう。 –