Question

我是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";
}

Answer 1

使用

var selectedVisibleValue = $(".unitDropDowns select:visible").val()

您可以获得所选的可见值。

我希望它有所帮助...

Answer 2

你知道，你有简单的javascript和jQuery。如果你想利用更多jQuery，你的代码转换为：

<强>的Javascript

$(document).ready(function() {
    $("#equipmentList").on("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");

    $("#punchIn").on("click", function() {
        $("#timeDiv").html(new Date());
    });

    $("#punchOut").on("click", function() {
        $("#timeDiv").html(new Date());
        $("#equipmentList").show();
        $("#jobDescription").show();
        $("#jobDesc").show();
        $("#equipRan").show();
    });

    $("#updateJob").on("click", function() {
        $("#jobDescription").show();
        $("#updateButton").show();
        $("#equipmentList").show();
        $("#jobDesc").show();
        $("#equipRan").show();
    });

    $("#updateButton").on("click", function() {
        $("#descriptionSummary").html("<h3>Description</h3><p>" + $("#jobDescription").val() + "</p>").show();
        $("#equipmentRan").html("<h3>Equipment Ran </h3><p>" + $("#equipmentList").val() + "</p>").show();
    });
});

<强> HTML

<h1>What do you want to do?</h1>
<div id="buttons">
    <button type="submit" id="punchIn">Clock In</button>
    <button type="submit" id="updateJob">Update</button>
    <button type="submit" id="punchOut">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" 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>

<强> Demo

从未隐藏的下拉列表中获取价值

2 个答案: