stackoom
  简体   繁体   中英

get value from drop down that is not hidden

 原文  2013-01-02 05:01:09  7   2    javascript/ jquery

Question

I am very new to JavaScript and JQuery so there may be a very simple solution to my problem. What I want to do is print out the unit number that is selected to the screen. The unit numbers change depending on what machine type is selected, the unit number drop down specific to the machine type is un-hidden when the machine type is selected. How can I tell JavaScript or JQuery to print the value selected in the unit number drop down? 

<!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 file 

    $(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";
}

2 answers

solution1
 3 ACCPTED  2013-01-02 05:05:25

With 

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

you can get the selected visible value.

I hope it helps...

solution2
 0  2013-01-02 05:20:07

Just so you know, you have a mix of plain javascript and jQuery. If you want take advantage of more jQuery here is your code converted to do so:

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question get selected value from drop down get value from drop down onchange redirect get the value of the selected option from the drop down Get a value from few drop down Get drop down value Jquery: From a group of drop down boxes, get selected value from a chosen drop down box Get value of drop down select How do I select a specific option value from a drop down list to show a hidden div? how can i store the value that i select from drop down and checkbox in the hidden filed? Update hidden input value with onclick event from ajax drop down menu
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM