Home/ Questions/Q 9066815
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T16:48:06+00:00

I am very new to JavaScript and JQuery so there may be a very

  • 0

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";
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    With

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

    you can get the selected visible value.

    I hope it helps…

    • 0