0
我对JavaScript和JQuery非常陌生，所以可能会有一个非常简单的解决方案来解决我的问题。我想要做的是打印出在屏幕上选择的单位编号。机器编号根据所选机器类型而变化，选择机器类型时，机器类型下的单位编号下拉菜单将不隐藏。我如何告诉JavaScript或JQuery打印在单元号下拉列表中选择的值？从隐藏下拉菜单中获取价值
<!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>
JavaScript文件
$(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";
}
可能要更新页面的“doctype”...谷歌HTML5文档类型 – charlietfl