【问题标题】:autohide text box when a particular option is selected from combo从组合中选择特定选项时自动隐藏文本框
【发布时间】:2012-02-21 16:34:39
【问题描述】:

我有一个组合框,在选择第二个或第三个选项时显示一个文本框,但是选择第一个选项时如何隐藏该文本框?

$("#combo").change(function () {
        $.getJSON('combo.jsp', {
            comboname: this.value
        }, function (data) {
            if(data.isTrue){
            $("#textbox").empty().append("<input type='text' id='text1'/>");// display an empty text box
                   }
                   else{
                       // how to clear that text box and hide it?
                   }
        });
    });

html

<select id="combo" name="comboname">
<option value="_"></option>// how to clear and hide the text box when this option is  
  selected?
<option value="somevalue">somename</option>// when this option is selected then it 
 displays an empty text box
<option value="somevalue1">somename1</option>when this option is selected then it also 
 displays the same empty text box
</select>
// in the following div, text box is being displayed
<div id="textbox">
// here text box is displayed when option 2nd or 3rd is selected from the above combo
</div>

服务器端(combo.jsp)

JSONObject jsonObj= new JSONObject(); 
 jsonObj.put("isTrue","true");
response.setContentType("application/json");
response.getWriter().write(jsonObj.toString());

【问题讨论】:

  • 数据“应该”是基于您的内容类型的 json 对象,它可能不是吗?在 if 语句上方的 return 函数中尝试 console.log(data) 如果它只返回一个字符串,你可能需要 jQuery.parseJSON(data) 才能像对象一样访问响应。
  • @j_mcnally 我在这里错了:stackoverflow.com/questions/9377544/…

标签: javascript jquery html json


【解决方案1】:

你真的需要服务器端吗?这里是一个没有的例子:

$("#combo").change(function () {
    if (this.value != '_') {  
        $("#textbox").empty().append("<input type='text' id='text1'/>");
    }
    else {
        $("#textbox").hide();
    }
});

另见this example

但如果真的需要服务器端,则必须有条件地设置isTrue

【讨论】:

【解决方案2】:

下面是要隐藏的代码

 $('#textbox').hide();

【讨论】:

  • @Phillipa:服务器端你总是用isTrue = true回答;所以在客户端if (data.isTrue) 也总是true;你永远不会进入else 部分。
  • 是的,那么我必须在客户端编写多个 if 块来处理来自服务器端的数据?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2022-06-11
  • 2011-09-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多