How to fetch value from database using Jquery?

Question

<div  class="border padding10 margin-bottom2">
    <label>Institute Name</label>
    <div id="div-sec-qual-inst-id" class="input-control select" data-role="input-control">
        <select id="sec-qual-inst-id" data-placeholder="Enter institute name" style="width:350px;" name="user.secHighQualInst" class="chosen-select" tabindex="-1">
            <option value=""></option>                                  
        </select>
    </div>

I want to display a text box when user selects 'others' in option from select box now my options are in database. I tried using this code

 $(function () {
    $("#sec-qual-inst-id").change(function () {
        if ($(this).val() == "#Others") {
             $("#other-sec-qual-inst-id").show();
        } else {
             $("#other-sec-qual-inst-id").hide();
        }
    });
});

but its not working i am using chosen.jquery.js. Do i need to change something in this?

    Handler.prototype.success = function(result, status, xhr){
        if(this.action == 'institutes'){
            institutes = result.campuses;
            $("#inst-id").append(getInstitutesHtml(institutes));            
            $("#inst-id").chosen();
        }else if(this.action == 'courses'){
            courses = result.courses;h
            $("#course-id").append(getCoursesHtml(courses));
            $("#course-id").chosen().change(function(that){
                var course = $("#course-id").val();
                var streams = {};
                var options = '<option value=""></option>';
                console.log(course);
                streams = courses[course];
                $.each(streams, function( index, value ) {
                    options = options+'<option value="'+value+'">'+value+'</option>'; 
                });
                $("#stream-id").html("");
                $("#stream-id").append(options);    
                if(flag){
                    $("#stream-id").chosen();
                    flag = false;
                }else{
                    $("#stream-id").trigger("chosen:updated");
                }
            });
        }else if(this.action == 'keyskills'){
            keyskills = result.keySkills;
            $("#keyskills-id").append(getKeyskillsHtml(keyskills));         
            $("#keyskills-id").chosen();
        }


    };

Answer 1

 $('#sec-qual-inst-id').on('change', function() { if ($(this).val() == "others") { alert($(this).val()); }else{ alert($(this).val()); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="border padding10 margin-bottom2"> <label>Institute Name</label> <div id="div-sec-qual-inst-id" class="input-control select" data-role="input-control"> <select id="sec-qual-inst-id" data-placeholder="Enter institute name" style="width:350px;" name="user.secHighQualInst" class="chosen-select" tabindex="-1"> <option value="abc">abc</option> <option value="xyz">xyz</option> <option value="others">others</option> </select> </div> 

Answer 2

Well... The long short is that you cannot fetch a value from a database in JavaScript. (Unless you are using server side JavaScript like node.js)

One approach would be to call a server endpoint that you created through XHR. The traditional example is this...

Actors in this play:

Client side (browser, JavaScript, CSS, HTML)

Server side (a LAMP stack, expressjs, Phoenix, Rails... anything that can respond to http requests, and also has some data backing)

Act one:

1. User clicks on "others"
2. On the client side JavaScript is listening to that event
3. JavaScript creates a XHR GET request to a endpoint on the server, say " http://my-server.com/options "
4. The server is setup to handle the url "/options" so it handles the request by querying the database to get the options, and returning them as a response (most often JSON)
5. The client side JavaScript receives the response, and coerces the payload into a data structure that can be set into a select menu
6. The client side JavaScript then inserts the coerced options into the menu, and the user can now choose from their fancy db backed options.

For the most part, this is the flow of the web. There are permutations on what the payload, and delivery mechanism is, but the dance is still the same.

The browser does its best to sandbox you, and for very good reason, could you imagine if anyone could reach into your database? Yikes!

Anyways, not sure if this helps, but you seem a little lost, or perhaps I misunderstood your question. Hopefully this can be a guide.