Question

Please any one help me to show and hide the text box appropriately.

Response: 
  <label>
    <select name="call_response" id="call_response">
    <option value="No Answer">No Answer</option>
    <option value="Not Available">Not Available</option>
    <option value="Not In Use">Not In Use</option>
    <option value="On MC, PL">On MC, PL</option>
    <option value="Pending Case">Pending Case</option>
    <option value="Other">Others - To specify</option>
    </select>
  </label><br><div id="hiddendiv">
<input type="text" id="othertextbox" />
</div>

jQuery code:

$(function()
{
$("#hiddendiv").hide();
});

$("#call_response").change(function()
{
if($("#call_response").find(":selected").val($(this).val()) == "Other")
{
    $("#hiddendiv").show();
}
});

$("#othertextbox").change(function(){

$("#call_response").val($("#othertextbox").text());});

---

---

Update from OP comment:

“I try in javascript I got the answer. How I can change to jquery? Please give
some idea.”

function setupScript() {
    OtherOnchanged('call_response', 'SPAN_Other', 'Other');
}
function displayNhide(display, status) {
    document.getElementById(display).style.display = status;
}
function OtherOnchanged(onChangedid, spanId, valueToCheck) {
    var value = document.getElementById(onChangedid).value;
    if (value == valueToCheck) {
        displayNhide(spanId, 'block');
    } else {
        displayNhide(spanId, 'none');
    }
}

Answer 1

You cannot set a <select>s value to something for which there is no option (at least with jQuery).

Add a hidden field for the real value, like so:

<label> Response:
<select name="call_response" id="call_response">
    <option value="No Answer">No Answer</option>
    <option value="Not Available">Not Available</option>
    <option value="Not In Use">Not In Use</option>
    <option value="On MC, PL">On MC, PL</option>
    <option value="Pending Case">Pending Case</option>
    <option value="Other">Others - To specify</option>
</select>
</label><br>

<input type="hidden" id="real_call_response"/>

<div id="hiddendiv">
    <input type="text" id="othertextbox"/>
</div>

Then activate it all with this jQuery:

$("#call_response").change ( function () {
    $("#real_call_response").val ( $("#call_response").val () );

    if ( $("#call_response").val ()  ==  "Other") {
        $("#hiddendiv").show().find('input').focus();
    }
    else
        $("#hiddendiv").hide();
} );

$("#othertextbox").bind ("change keypress keyup blur", function () {
    $("#real_call_response").val ( $("#othertextbox").val () );
} );

Note: Use CSS to hide hiddendiv initially.

See it all in action at jsFiddle.

---

---

Update:

That new code, converted to jQuery is just:

function setupScript() {
    OtherOnchanged('call_response', 'SPAN_Other', 'Other');
}

function OtherOnchanged (onChangedId, spanId, valueToCheck) {

    if ( $("#" + onChangedId).val() ==  valueToCheck)
        $("#spanId").show ()
    else
        $("#spanId").hide ()
}