How to find Currently Selected value from this Custom HTML form Tag?

Question

I have an element which is text box but its value is populated from another hidden select element.

<input type="text" id="autocompleteu_17605833" style="box-shadow: none; width: 119px;" class="mobileLookupInput ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
<select id="u_17605833" name="u_17605833" style="visibility: hidden">
    <option value="127468">Virginia</option>
    <option value="127469">Washington</option>
    <option value="127470">West Virginia</option>
    <option value="127471">Wisconsin</option>
    <option value="127472">Wyoming</option>
</select>

var mySelObju_17605833 = document.getElementById("u_17605833");
$(function () {
    var availableTagsu_17605833 = new Array();
    for (var i = 0; i < mySelObju_17605833.options.length; i++) {
        if (mySelObju_17605833.options[i].text != 'Other') {
            availableTagsu_17605833[i] = mySelObju_17605833.options[i].text;
        }
    }
    $("#autocompleteu_17605833").width($(mySelObju_17605833).width() + 5);
    availableTagsu_17605833 = $.map(availableTagsu_17605833, function (v) {
        return v === "" ? null : v;
    });
    $("#autocompleteu_17605833").autocomplete({
        minLength: 0,
        source: function (request, response) {
            var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
            var a = $.grep(availableTagsu_17605833, function (item, index) {
                var items = item.split(" ");
                for (i = 0; i < items.length; i++) {
                    if (matcher.test(items[i])) return matcher.test(items[i]);
                }
                return matcher.test(item);
            });
            response(a);
        },
        close: function (event, ui) {
            for (var i = 0, sL = mySelObju_17605833.length; i < sL; i++) {
                if (mySelObju_17605833.options[i].text.toLowerCase() == $("#autocompleteu_17605833").val().toLowerCase()) {
                    mySelObju_17605833.selectedIndex = i;
                    $("#errorTDu_17605833").html("");
                    break;
                }
                mySelObju_17605833.selectedIndex = 0;
                $("#errorTDu_17605833").html("Error: Invalid Input");
            }
            $("#autocompleteu_17605833").trigger("onchange")
        }
    });
});
$("#autocompleteArrowu_17605833").click(function () {
    $("#autocompleteu_17605833").autocomplete("search");
    $("#autocompleteu_17605833").focus();
});
$("#autocompleteu_17605833").focusout(function () {
    for (var i = 0, sL = mySelObju_17605833.length; i < sL; i++) {
        if (mySelObju_17605833.options[i].text.toLowerCase() == $("#autocompleteu_17605833").val().toLowerCase()) {
            mySelObju_17605833.selectedIndex = i;
            $("#errorTDu_17605833").html("");
            break;
        }
        mySelObju_17605833.selectedIndex = 0;
        $("#errorTDu_17605833").html("Error: Invalid Input");
    }
    $("#autocompleteu_17605833").trigger("onchange")
    //$(this).autocomplete("close");
});

I want to find value selected in the hidden select box! I tried to do the following

$("#autocompleteu_17605833").on("click", function (event) {
    $((this.id).substring((this.id).indexOf("_") - 1)).attr("onchange", function (event) {
        var selece = this.value;
        alert(selece);
    });
});
$("#autocompleteu_17605833").next().on("click", function (event) {
    var selectedValue = document.getElementById((this.id).substring((this.id).indexOf("_") - 1)).value;
    alert("Click on Arrow" + selectedValue);
});
$("#autocompleteu_17605833").on("change", function (event) {
    var selectedValue = document.getElementById((this.id).substring((this.id).indexOf("_") - 1)).value;
    alert("Changing the value" + selectedValue);
});

what I'm getting is older value where as I need the current assigned value. How to achieve this??

Answer 1

WORKING DEMO

If am not wrong you want the selected value for this you can use select method

 select:function(event,ui) {
        alert("You have selected "+ui.item.label); 
        alert("You have selected "+ui.item.value);
    }

Answer 2

This is a simple piece of code that will work as you required.

 function result(){ document.getElementById("result").innerHTML= document.getElementById("u_17605833").value; } 

 <html> <head> </head> <body> <div> <select id="u_17605833" name="u_17605833" > <option value="127468">Virginia</option> <option value="127469">Washington</option> <option value="127470">West Virginia</option> <option value="127471">Wisconsin</option> <option value="127472">Wyoming</option> </select> <input type="button" value="Show the result" onclick="result()"/> </div> <div id="result"></div> </body> </html>