0
숨겨지지 않습니다 그래서 내 문제에 대한 매우 간단한 해결책이있을 수 있습니다 자바 스크립트와 JQuery와 아주 새로운 오전. 원하는 것은 화면에 선택된 유닛 번호를 출력하는 것입니다. 선택한 기계 유형에 따라 단위 x 호가 변경되고, 기계 유형이 선택 될 때 기계 유형에 특정한 단위 x 호 드 름은 숨김으로 설정됩니다. 유닛 번호 드롭 다운에서 선택한 값을 인쇄하도록 JavaScript 또는 JQuery에 지시하려면 어떻게해야합니까?GET 값이
<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<script src="../jquery-1.8.3.js"></script>
<script src="jsFunctions.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link media="Screen" href="timeCard.css" type="text/css" rel="stylesheet" />
<link media="only screen and (max-device-width: 480px) and (min-device-width: 320px)" href="mobile.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>What do you want to do?</h1>
<div id="buttons">
<button type="submit" id="punchIn" onclick="timeIn()">Clock In</button>
<button type="submit" id="updateJob" onclick="updateJob()">Update</button>
<button type="submit" id="punchOut" onclick="timeOut()">Clock Out</button>
</div>
<div id="content">
<label id="jobDesc" style="display: none">Job Description</label>
<input type="text" id="jobDescription" style="display: none"/>
<label id="equipRan" style="display: none">Equipment ran</label>
<select size="1" name="equipmentList" title="" id="equipmentList" style="display: none">
<option value="">Select Machine</option>
<option value="EX">Excavator</option>
<option value="DZ">Dozer</option>
<option value="SC">Scraper</option>
</select>
<div class="unitDropDowns">
<div class="EX">
<select class="exUnitNumbers">
<option value="">Unit number</option>
<option value="01E">01E</option>
<option value="2E">2E</option>
<option value="4E">4E</option>
</select>
</div>
<div class="DZ">
<select class="dzUnitNumbers">
<option value="">Unit number</option>
<option value="01D">01D</option>
<option value="2D">2D</option>
<option value="1D">1D</option>
</select>
</div>
<div class="SC">
<select class="scUnitNumbers">
<option value="">Unit number</option>
<option value="54C">54C</option>
<option value="53C">53C</option>
<option value="52C">52C</option>
</select>
</div>
</div>
<button type="submit" id="updateButton" onclick="dbQuery()" style="display: none">Submit</button>
<div id="summary">
<div id="timeDiv" style="color: red;"></div>
<div id="descriptionSummary" style="display: none"></div>
<div id="equipmentRan" style="display: none"></div>
</div>
</div>
</body>
</html>
자바 스크립트
var selectedVisibleValue = $(".unitDropDowns select:visible").val()
선택한 보이는 값을 얻을 수 있습니다으로
$(document).ready(function() {
$('#equipmentList').bind('change', function() {
var elements = $('div.unitDropDowns').children().hide(); // hide all the elements
var value = $(this).val();
if (value.length) { // if somethings' selected
elements.filter('.' + value).show(); // show the ones we want
}
}).trigger('change');
});
var timeIn = function() {
var clockIn = new Date();
timeDiv.innerHTML = clockIn;
}
var timeOut = function(){
var clockOut = new Date();
timeDiv.innerHTML= clockOut;
document.getElementById("equipmentList").style.display = "block";
document.getElementById("jobDescription").style.display = "block";
document.getElementById("jobDesc").style.display = "block";
document.getElementById("equipRan").style.display = "block";
}
var updateJob = function(){
document.getElementById("jobDescription").style.display = "block";
document.getElementById("updateButton").style.display = "block";
document.getElementById("equipmentList").style.display = "block";
document.getElementById("jobDesc").style.display = "block";
document.getElementById("equipRan").style.display = "block";
}
var dbQuery = function(){
var description = document.getElementById("jobDescription").value;
var selectedEquip = document.getElementById("equipmentList");
var selectedEquip1 = selectedEquip.options[selectedEquip.selectedIndex].text;
document.getElementById("descriptionSummary").innerHTML = "<h3>Description</h3>" + "<p>" + description + "</p>";
document.getElementById("equipmentRan").innerHTML = "<h3>Equipment Ran </h3>" + "<p>" + selectedEquip1 + "</p>";
document.getElementById("equipmentRan").style.display = "block";
document.getElementById("descriptionSummary").style.display = "block";
}
로 할 수 있습니다 : 당신이 더 많은 jQuery를 활용하려면 여기 이렇게 변환 된 코드입니다 페이지의'doctype' 업데이트 ... 구글'HTML5 doctype' – charlietfl