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

你有正确的想法，但你有一个小错字。使用以下（working 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 2

试试这个

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

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

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

   $("#call_response").val($(this).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

您不能将<select>的值设置为没有option的值（至少使用jQuery）。

为 real 值添加隐藏字段，如下所示：

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

See it all in action at jsFiddle.

更新

转换为jQuery的新代码只是：

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

function OtherOnchanged (onChangedId, spanId, valueToCheck) {

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

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

OP评论更新：

5 个答案:

更新