当我选择“其他”时显示文本输入从选择控件

Question

请任何人帮助我适当地显示和隐藏文本框。

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 代码：

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

---

---

从 OP 评论更新：

“我尝试使用 javascript 得到了答案。我如何更改为 jquery？请给出 一些想法。”

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

您不能将 的值设置为没有 option 的值（至少对于 jQuery）。

为真实值添加一个隐藏字段，如下所示：

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

然后用这个 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 () );
} );

注意：最初使用 CSS 隐藏 hiddendiv。

在 jsFiddle 上查看所有操作。

---

---

更新：

新代码已转换到 jQuery 就是：

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

function OtherOnchanged (onChangedId, spanId, valueToCheck) {

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

Answer 2

你的想法是正确的，但有一个小错字。使用以下内容（工作 JSFiddle）：

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

 $("#call_response").change(function() {
   //EDIT: Just call val(), not val(...)
   if($("#call_response").find(":selected").val() == "Other") {
     $("#hiddendiv").show();
   }
 });

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

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

Answer 3

您应该将观察者置于文档就绪事件中的元素。否则，如果 dom 没有准备好并且 dom 元素不存在，那么你的观察者将毫无用处。

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

});

Answer 4

您是否尝试过将事件处理程序分配移动到文档就绪处理程序中？否则，他们可能找不到您尝试附加它们的元素，因为它们尚未准备好。

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

});

Answer 5

试试这个

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

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

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

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

});