一个复杂的问题，多步

Question

先贴代码<tr class="tr_data1">
   <td>公司名称</td>
   <td><select name="companyName" size="1" style="position:absolute; left: 237px; top: 85px; width: 220px; height: 20px;
    clip: rect(0 237 18 200)" onchange="company_name.value=companyName.value; company_name.select()">
   <%
      for(Iterator iter = list.iterator(); iter.hasNext(); ) {
       piv = (PropertyInfoView)iter.next();
   %>
       <option value="<%=piv.getId() %>"><%=piv.getCompanyName() %></option>
    <%
      } 
    %>
    </select><input type="text" size="35"  name="company_name" style="position:absolute; left: 237px; top: 85px; width: 220px; height: 18px"></td>
</tr>-----------------------------输入框 下拉框在一起 ，下拉的数据读取的是数据库 现在：company_name.value=companyName.value上面这句话显示的是 前面的id，我想显示select中间的值，改如何解决？问题2 ：现在可以保存，选择下拉的话。但要是输入的话，输入的公司还保存不上，只能默认保存  下拉默认选中的。
问题3：input输入 如何 显示 数据库里面相关的信息，并 在下拉显示

Answer 1

问题1：
onchange="company_name.value=companyName.value; company_name.select()"
改一下吧：
onchange="company_name.value=renderInput(this); company_name.select()">
定义函数renderInput
function renderInput(obj){
  var opts = obj.options;
  for(var i = 0 ; i < opts.length ; i ++){
    if(opts[i].checked == "true" || opts[i].checked == "checked"){
        document.getElementById("companyName").value = opts[i].text;
    }
  }
}问题2：
不清楚你的需求，你干脆这样嘛，将输入框中的值使用js添加至下拉框中，再将添加进去的值选中不就OK了嘛问题3：
你上面的select中的值不就是从数据库查出来的么？还需要怎么样啊？

Answer 2

onchange="changeValue();"  function changeValue() {
   var obj = document.getElementById("companyName");
   var company_name = document.getElementById("company_name");
   var index = obj.selectedIndex;
   var value = obj.options[index].text; 
   company_name.value = value; 
   company_name.select();
  }
这个解决了问题1的一部分，存在bug
默认选中那个添加不上，必须 选一下别的 才能选中

Answer 3

上面的方法为onchange，改变时才选中，但默认进来时是空白的，况且默认别选中的 添加不进去。该怎么解决。问题3是  我输入一个字  数据库里面和这个字有关的 公司列表显示出来，输入两个字 就减少一些。需求是：当有很多公司时  看下拉 找公司  很麻烦。

Answer 4

你想取第一个的话，就在遍历第一个的进修声明个局部变量存一下，然后把想放到text中的值，放进去不就行了！
如果想向文本框中输入值，select也联动的话，可以采用人家的建议使用ajax查一下，填充到select中呗！

Answer 5

用 onclick函数 判断了一下，点击显示第一个。我记得  可以 在select里面 写一个 javascript：能自动写  javascript语句 或者 设置默认函数，既不清楚了，请问有谁知道吗？还有第三个问题 能 大体给点提示么

Answer 6

问题3还是页面动态显示的问题。
一种情况，页面加载的时候，从数据库里读出来，加载到下拉列表里。
一种情况，页面局部动态显示，ajax，局部刷新。

Answer 7

请问 ：javascript如何动态 取得 input里面值，例如 ：输入  一  javascript得到 一 然后自动去 数据库 查找  ，含  一 的都被取出  用  下拉 展示出来 ，然后 ：再 输入  天  ，这时 自动 搜索  一天  。
网高人指点一下 ，用javascript 和 Ajax 如何实现楼上能 具体说说嘛。

Answer 8

<tr class="tr_data1">
   <td>公司名称</td>
   <td><select name="companyName" size="1" style="position:absolute; left: 237px; top: 85px; width: 220px; height: 20px;
    clip: rect(0 237 18 200)" onchange="changeValue();" onclick="checkValue();" >
   <%
      for(Iterator iter = list.iterator(); iter.hasNext(); ) {
       piv = (PropertyInfoView)iter.next();
   %>
       <option value="<%=piv.getId() %>"><%=piv.getCompanyName() %></option>
    <%
      } 
    %>
    </select><input type="text" size="35"  name="company_name" style="position:absolute; left: 237px; 
     top: 85px; width: 220px; height: 18px" onclick="checkInputValue();"></td>
</tr>
------------------  function changeValue() {
   var obj = document.getElementById("companyName");
   var company_name = document.getElementById("company_name");
   var index = obj.selectedIndex;
   var value = obj.options[index].text;    company_name.value = value; 
   company_name.select();
  }
  function checkValue() {
   var obj = document.getElementById("companyName");
   var company_name = document.getElementById("company_name");
   var index = obj.selectedIndex;
   if(index == 0) {
   company_name.value = obj.options[0].text;
   }
  }
  function checkInputValue() {
   var company_name = document.getElementById("company_name");
   company_name.value = "";
  }-------------------现在还差上面的问题，动态检索，不知道用什么事件判断。我的实现方法笨 了一些，如果谁有好的，指点一下。代码贴出来了，望高人指教。

Answer 9

你的输入框是查找select的值还是从服务器从新匹配新数据？如果是查找select里面的值，可以参考这个示例select对象option的autocomplete自动完成如果是从服务器下载数据，input添加onblur事件，blur的时候ajax将输入框的值发送到动态页，动态页查询数据库后返回html代码，如<select name="xxx"><option value="xxx">xx</option>...</select>这种，然后设置select容器的innerHTML就行了，注意要给select加一个容器
<label>
<select name="companyName" size="1" style="position:absolute; left: 237px; top: 85px; width: 220px; height: 20px;
  clip: rect(0 237 18 200)" onchange="company_name.value=companyName.value; company_name.select()">
  <%
  for(Iterator iter = list.iterator(); iter.hasNext(); ) {
  piv = (PropertyInfoView)iter.next();
  %>
  <option value="<%=piv.getId() %>"><%=piv.getCompanyName() %></option>
  <%
  } 
  %>
  </select></label>

Answer 10

问题3  实现像百度输入那样效果？
那就需要在输入框里实现onchange事件，在input 下面放一个DIV，每次onchange调用ajax从数据库查询相应的数据，然后返回给DIV里。div每一条数据都有一个onclick事件，把自己的值传递给input。这是我大概的想法，没什么技术含量，但应该能实现。

Answer 11

<%@ page language="java" import=" java.util.*" %>
<jsp:directive.page import="com.pkpm.fund.bean.PropertyInfoBean"/>
<jsp:directive.page import="com.pkpm.fund.view.PropertyInfoView"/>
<% 
String k,xml,res;
res = "";
xml = "";
k = (request.getParameter("k") + "").trim();
if (k != null) {
//当出现中文字符时，最好用XML作为信息载体，要不出现乱码
 //k = k.replace(k,"'","''");
 String cn,rs,sql;
 xml=xml + "<?xml version='1.0' encoding='gb2312'?>";
 xml=xml + "<data><d><![CDATA[";
 sql="select top 10 companyName from property_info where companyName like '%&k&%'"; //返回前10条数据;
 List list = new PropertyInfoBean().getPropertyInfoListBySql(sql);
 for(int i=0; i<list.size(); i++) {
 PropertyInfoView piv = (PropertyInfoView)list.get(i);
 xml = xml + "<div onclick='setContent(this.innerHTML)'>" + piv.getCompanyName() + "</div>";
 }
 xml=xml + "]]></d></data>";
 response.setCharacterEncoding("gb2312");
 response.setContentType("text/xml");
 response.getWriter().write(xml);
}
else {
response.getWriter().write(xml);
}
%> 我是我的jsp代码，刚才在修改，提示 报错。select外边有td  可以么

Answer 12

ajax填充：
$.ajax({
   type: "post",
    url: "/yoblhtjfx/queryArea.action",
    data: "parm="+val+"&jsoncallback=?",
    dataType: "json",
    success: function(json){
    var list = json.list;
    $("#inUnitAreaId").empty();
    $("#inUnitAreaId").prepend("<option value=''>请选择</option>");
for(var i=0;i<list.length;i++)
{
    $("#inUnitAreaId").append("<option value='"+list[i][0]+"'>"+list[i][1]+"</option>");
    }
    }
   
   });
  
   $("#projectId").val(val+"1");动态时间查询：
$(function(){
             if($.browser.msie)
             {
                   $("#country").get(0).attachEvent("onpropertychange",function (o){
                             var countr = o.srcElement.value;
                            $.ajax({
   type: "post",
    url: "/yoblhtjfx/queryCountryAjax.action",
    data: "country="+countr+"&jsoncallback=?",
    dataType: "json",
    success: function(json)
    {
    var tableHTML="";
     
      tableHTML+="<table id='tabb1' border='1' width='100%'>";
      tableHTML+="<tr>";
      tableHTML+="<td style='text-align: center'  >选择</td>";
      tableHTML+="<td style='text-align: center'  >区域码</td>";
      tableHTML+="<td style='text-align: center'  >国别名称</td>";
      tableHTML+="</tr>";
      var list = json.list;
      for(var i=0;i<list.length;i++)
      {
      tableHTML+="<tr>";
      tableHTML+="<td style='text-align: center'><input type='radio' name='radioo' value='"+list[i][1]+"' /></td>";
      tableHTML+="<td style='text-align: center'>"+list[i][0]+"</td>";
      tableHTML+="<td style='text-align: center'>"+list[i][1]+"</td>";
      tableHTML+="</tr>";
      }
      tableHTML+="</table>";
     
      $("#querycountrydiv").html(tableHTML);
    }
   
   });
                     });
             }
     }); 

Answer 13

我没有用过json啊，您的代码我看不懂，恩 直接javascript的已经实现，现在就是 jsp页面还存在问题。我再 查查，也希望高人查查 。我把 代码 贴出来form里面：
<tr class="tr_data1">
   <td>公司名称</td>
   <td><select name="companyName" size="1" style="position:absolute; left: 237px; top: 85px; width: 220px; height: 20px;
    clip: rect(0 237 18 200)" onchange="changeValue();" onclick="checkValue();" >
   <%
      for(Iterator iter = list.iterator(); iter.hasNext(); ) {
       piv = (PropertyInfoView)iter.next();
   %>
       <option value="<%=piv.getId() %>"><%=piv.getCompanyName() %></option>
    <%
      } 
    %>
    </select><input type="text" size="35" id="company_name" name="company_name" style="position:absolute; left: 237px; 
     top: 85px; width: 220px; height: 18px" onclick="checkInputValue();" onkeyup="getD(this.value);"></td>
     <div id="dvContent" style="display:none;position:absolute"></div>
    
</tr>
------------------------
javascript： //下拉 
var obj;;
var to;//setTimeout时间变量，对于输入快时可以延迟查询
function getD(va)
{
  if(to) clearTimeout(to);
  to = setTimeout("getData('"+va+"')",500);//延迟500毫秒后再查询
}
function getData(va)
{
  document.getElementById("dvContent").style.display="none";
  if(va!="")
  {
    var url='res.jsp?ts='+new Date().getTime()+'&k='+va;
    obj = CreateAJAX();
    if(obj)
    {
      obj.onreadystatechange=handlejs;
      obj.open('GET',url,true);
      obj.send(null);
    }
    else
     alert("创建AJAX对象失败！");
  }
}
function handlejs()
{
   if(obj.readyState==4)
   {
      if(obj.status==200)
      {            
          if(obj.responseXML)
          {
         xml=obj.responseXML;
         node=xml.getElementsByTagName("d");
            var dv=document.getElementById("dvContent");
            dv.innerHTML=node[0].firstChild.nodeValue;
         dv.style.display="";
          }
      }
      else 
        alert("请求的文件出错，请检查！");                     
   }   
}
function CreateAJAX()
{  
  if(window.XMLHttpRequest) {
return  new XMLHttpRequest();
} else if (window.ActiveXObject) {
return  new ActiveXObject("Microsoft.XMLHTTP");
}
}
function setContent(data)
{
  document.getElementById('company_name').value=data;
  document.getElementById('dvContent').style.display="none";
}
function setPosition()
{
  var dv=document.getElementById('dvContent');
  dv.style.left=getPos("x");
  dv.style.top=getPos("y")+20;
}
function getPos(type)
{
  var p;
  var o=document.getElementById('company_name');
  if(type=="x")
   p=o.offsetLeft;
  else
   p=o.offsetTop;
  while(o=o.offsetParent)
  {
    if (type=="x")
    {
      p+=o.offsetLeft; 
    }
    else
    {
      p+=o.offsetTop;
    }
  }
  return p;
}
  
------------------------
jsp：<%@ page language="java" import=" java.util.*" %>
<jsp:directive.page import="com.pkpm.fund.bean.PropertyInfoBean"/>
<jsp:directive.page import="com.pkpm.fund.view.PropertyInfoView"/>
<% 
String k,xml,res;
res = "";
xml = "";
k = (request.getParameter("k") + "").trim();
if (k != null) {
//当出现中文字符时，最好用XML作为信息载体，要不出现乱码
 //k = k.replace(k,"'","''");
 String cn,rs,sql;
 xml=xml + "<?xml version='1.0' encoding='gb2312'?>";
 xml=xml + "<data><d><![CDATA[";
 sql="select top 10 companyName from property_info where companyName like '%&k&%'"; //返回前10条数据;
 List list = new PropertyInfoBean().getPropertyInfoListBySql(sql);
 for(int i=0; i<list.size(); i++) {
 PropertyInfoView piv = (PropertyInfoView)list.get(i);
 xml = xml + "<div onclick='setContent(this.innerHTML)'>" + piv.getCompanyName() + "</div><br>";
 }
 xml=xml + "]]></d></data>";
 response.setCharacterEncoding("gb2312");
 response.setContentType("text/xml");
 response.getWriter().write(xml);
}
else {
response.getWriter().write(xml);
}
%> 
  

Answer 14

javascript少了一部分不过这部分比较简单  是实现  下拉和 input的 我的方法比较笨拙  自己想的  如果哪位有更好地实现  欢迎分享  function changeValue() {
   var obj1 = document.getElementById("companyName");
   var company_name = document.getElementById("company_name");
   var index = obj1.selectedIndex;
   var value = obj1.options[index].text;    company_name.value = value; 
   company_name.select();
  }
  function checkValue() {
   var obj2 = document.getElementById("companyName");
   var company_name = document.getElementById("company_name");
   var index = obj2.selectedIndex;
   if(index == 0) {
   company_name.value = obj2.options[0].text;
   }
  }
  function checkInputValue() {
   var company_name = document.getElementById("company_name");
   company_name.value = "";
  }

Answer 15

给个jq的简单例子参考下，select不需要容器，直接返回option数据
xx.jsp，不会用java，大概根据你的代码修改了下
<%@ page language="java" import=" java.util.*" %>
<jsp:directive.page import="com.pkpm.fund.bean.PropertyInfoBean"/>
<jsp:directive.page import="com.pkpm.fund.view.PropertyInfoView"/>
<% 
String k,xml,res;
res = "";
xml = "";
k = (request.getParameter("k") + "").trim();
if (k != "") {
 sql="select top 10 companyName from property_info where companyName like '%"+k+"%'"; //返回前10条数据;
 List list = new PropertyInfoBean().getPropertyInfoListBySql(sql);
 for(int i=0; i<list.size(); i++) {
PropertyInfoView piv = (PropertyInfoView)list.get(i);
xml = xml + "<option value='" + piv.getCompanyName() + "'>" + piv.getCompanyName() + "</option>";
 }
 response.setCharacterEncoding("gb2312");
 response.getWriter().write(xml);
}
%> <script type="text/javascript" src="http://www.code-design.cn/js/jquery.js"></script><!--导入jq-->
<tr class="tr_data1">
  <td>公司名称</td>
  <td><select name="companyName" size="1" style="position:absolute; left: 237px; top: 85px; width: 220px; height: 20px;
  clip: rect(0 237 18 200)" onchange="company_name.value=companyName.value; company_name.select()" id="companyName"><!--注意加ID-->
  <%
  for(Iterator iter = list.iterator(); iter.hasNext(); ) {
  piv = (PropertyInfoView)iter.next();
  %>
  <option value="<%=piv.getId() %>"><%=piv.getCompanyName() %></option>
  <%
  } 
  %>
  </select><input type="text" size="35" name="company_name" style="position:absolute; left: 237px; top: 85px; width: 220px; height: 18px" onblur="loadCompany(this.value)"></td>
</tr>
<script type="text/javascript">
    function loadCompany(v) {
        if ($.trim(v) != '') {
            $.ajax({ url: 'xx.jsp', data: 'k=' + escape(v), method: 'POST', success: function (xhr) {
                $('#companyName').html(xhr.responseText);
            }, error: function (xhr) { alert('发生错误\n' + xhr.responseText); } 
            });
        }
    }
</script>

Answer 16

谢谢。不过小弟 jQuery也不是很熟悉啊，唉 

Answer 17

实在调试不出来啊，郁闷，望高人 帮我整理一下jsp啊。

Answer 18

jsp代码在19楼  望高人赐教。