0
私は、ロード時にtitleプロパティを表示するという選択をしています。私はいくつかのJSを持っているので、特定のオプションが選択されたときに別のdivが表示されます。私の問題は、divの負荷が表示され、正しいオプションが選択されるまで表示させたくないということです。 JSがそうでないと言ったときにHTMLを表示
function typePicker() {
var sel = document.getElementById("type");
var manufacturer = document.getElementById("manufacturer");
var model = document.getElementById("model");
var typeInputs = document.getElementById("typeInputs");
var aps = document.getElementById("aps");
var cables = '<div class="form-group"><input type="text" class="form-control" id="type" name="cableType" placeholder="Type"></div><div class="form-group"><input type="number" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="quantity" name="quantity" placeholder="Quantity"></div><!-- Quantity --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location -->';
// Yes I know this is improper that is why I am doing the switch over and came across this issue
if (sel.value == "aps") {
aps.style.display = 'block';
} else {
aps.style.display = 'none';
}
if (sel.value == "cables") {
manufacturer.style.display = 'none';
model.style.display = 'none';
typeInputs.innerHTML = cables; // This line will be changed soon to the style above in process of doing this to all.
} else {
manufacturer.style.display = 'block';
model.style.display = 'block';
}
}<div class="form-group">
<label for="type" class="control-label">Type</label>
<select class="form-control selectpicker" title="Type of Asset" name="type" data-live-search="true" id="type" onchange="typePicker()">
<option value="aps">Access Point</option>
<option value="cables">Cable</option>
<option value="desktops">Desktop</option>
<option value="laptops">Laptop</option>
<option value="deskPhones">Desk Phone</option>
<option value="mobilePhones">Mobile Phone</option>
<option value="monitors">Monitor</option>
<option value="printers">Printer</option>
<option value="projectors">Projector</option>
<option value="routers">Router</option>
<option value="switches">Switch</option>
<option value="tablets">Tablet</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group" id="typeInputs">
<div id="aps">
<div class="form-group">
<input type="text" class="form-control" name="ipaddress" id="ipaddress" placeholder="IP Address">
</div>
<!-- IP Address -->
<div class="form-group">
<input type="text" class="form-control" name="mac-address" id="mac-address" placeholder="MAC Address">
</div>
<!-- MAC Address -->
<div class="form-group">
<input type="text" class="form-control" name="range" id="range" placeholder="Range in M">
</div>
<!-- Range -->
<div class="form-group">
<input type="text" class="textbox-n form-control" name="bands" id="bands" placeholder="Bands">
</div>
<!-- Bands -->
<div class="form-group">
<input type="text" class="form-control" name="channels" id="channels" placeholder="Channel(s)">
</div>
<!-- Channels -->
<div class="form-group">
<input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type=\'date\')" onblur="(this.type\'text\')" id="date-bought" name="dateBought">
</div>
<!-- Date Bought -->
<div class="btn-group" data-toggle="buttons">
<label for="poe">PoE</label>
<br>
<label class="btn btn-primary"><input type="radio" name="poe" id="option1"> Yes</label>
<label class="btn btn-primary"><input type="radio" name="poe" id="option2"> No</label>
</div> <br><br>
<!-- PoE -->
<div class="form-group">
<input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type=\'date\')" onblur="(this.type=\'text\')" id="warranty-date" name="warrantyDate">
</div>
<!-- Warranty Date -->
<div class="form-group">
<input class="form-control" id="location" placeholder="Location">
</div>
<!-- Location -->
</div>
</div>
<div class="form-gorup" id="warningType">
</div>私はあなたが別のオプションを選択したときに、すべての仕事にスニペットを取得することはできません。スニペットにコードがある唯一のものは、APとケーブル用です。コードは私のサーバー上のファイルで動作し、私が信じているこのスニペットには十分です。負荷時に表示されているAPS DIVの主な問題は問題です。負荷をかけて表示させないにはどうすればいいですか？
追加のコードや情報が必要な場合は、遠慮なくご相談ください。
の代わりにあなたがhttp://jsfiddle.netを試すかhttps://plnkr.coもスニペットまたは何でも... – dhilt
ただ、ノート、本当にこれは良い方法のように思えます開発する - jsのないユーザーがすべてのコンテンツを取得し、jsを持っている場合にのみコンテンツを表示し、jsによってそのコンテンツを隠して制御する必要があることをすべて表示します。とにかく控えめなjavascriptのpriciplesによると。だから、jsを持たないユーザにはCSSを表示するオプションがないので、CSSを使ってそれらを非表示にすることを警告したいだけです。 jsを使用してそれらを非表示にします。 – wunth
@wunth私は同じ名前の複数のフィールドを持っていますが、あなたの方法で保存する別のモデルでは動作しません。誰もJavaScriptを持っていないのですか？ Chrome、Safari、Firefox、Edgeなどはすべてデフォルトで提供しています。 –