弹出选择框如何实现的

为了方便用户的输入和减少出错概率，现在要做个选择输入框。不是下拉列表，而是弹出选择那些，只要用户点一下按钮，就能在页面上弹出可以供用户选择的数据。就跟很多软件界面上的那个放大镜的功能一样的（最好是不在不刷新页面的情况下能取到值）。

解决方案 »

  1.   

    用javascript弹出窗口时把父窗口中查出来要供选择的值写入弹出的窗口，选择后将所选的值写入父窗口即可。
      

  2.   

    原本是下拉框的写个查询页面 每个前面一个单选框
    在父窗口写一个js调用那个查询页面通过js把调用过来的页面勾选的值赋到主页面
      

  3.   

    弹出框太简单了,上google搜一下,一大片
      

  4.   

    在主页面中点击选择按钮，弹出一个模态窗口，供用户选择数据
    模态窗口中的数据可以根据需要从数据库或后台生成
    在模态窗口中选择数据点确定按钮后，主页面接受用户选择的数据parent.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function selectValue(){
    var testInput = document.all.testInput;
    var returnValue = window.showModalDialog("sub.html","","status:no;resizable:yes;dialogHeight:410px;dialogWidth:460px;unadorne:yes"); 
    testInput.value = returnValue;
    }
    //-->
    </SCRIPT>
    </HEAD><BODY>
    text:<input type="text" name="testInput" /><br>
    <input type="button" onclick="selectValue()" value="选择" />
    </BODY>
    </HTML>sub.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function selectValues(){
       var obj = document.getElementsByName("temp");
       var value = "";
       for(var i = 0 ;i < obj.length ; i ++){
    if(obj[i].checked == true)
    value += obj[i].value;
       }
       window.returnValue=value;
       window.close();
    }
    //-->
    </SCRIPT>
    </HEAD>

    <BODY>
    <input type="checkbox" name="temp" value="A" />  A <br>
    <input type="checkbox" name="temp" value="B"/>  B <br>
    <input type="checkbox" name="temp" value="C" /> C <br>
    <input type="checkbox" name="temp" value="D" />  D <br>
    <input type="button" value="确定" onclick="selectValues()"/>
    </BODY>
    </HTML>
      

  5.   

    给你个以前做的例子主页面
     <script type="text/javascript">
    function opens(){

    var salaryStandard=window.showModalDialog("<%=request.getContextPath()%>/pay/salaryStandardById.jsp");//这里其实是跳到一个查询页面 查出所有数据 用个iframe包住了下面的子页面

    if(salaryStandard!=null){
    document.getElementsByName("pay.salaryStandard.salaryStdId")[0].value=salaryStandard.salaryStdId.replace(" ","");
    document.getElementsByName("pay.salaryStandard.salaryStdName")[0].value=salaryStandard.salaryStdName.replace(" ","");
    alert(salaryStdName);
    }
    }</script>
     <td width="84">
          <span class="STYLE1">薪酬编号</span>
          </td>
          <td width="117"><span class="STYLE1">
            <label>
            <html:text property="pay.salaryStandard.salaryStdId" size="15" readonly="true" onclick="opens()"></html:text>
            </label>
          </span></td>
          <td width="86">
          
          <span class="STYLE1">薪酬标准名称</span>
          </td>
          <td width="114"><span class="STYLE1">
            <label>
            <html:text property="pay.salaryStandard.salaryStdName" readonly="true" size="15"></html:text>
            
            </label>
          </span></td>子页面<script type="text/javascript">
    function createSalaryStandard(salaryStdId,salaryStdName){
    var salaryStandard=new Object();
    salaryStandard.salaryStdId=salaryStdId;
    salaryStandard.salaryStdName=salaryStdName;
    return salaryStandard; 
    }

    function getSalaryStandard(){
    var v=null;
    var checkCompanyIds=document.getElementsByName("checkCompany");
    if(checkCompanyIds!=null){
    var checkObject=null;
    for(i=0;i<checkCompanyIds.length;i++){
    if(checkCompanyIds[i].checked==true){
    checkObject=checkCompanyIds[i];
    break;
    }
    }
    if(checkObject!=null){
    var myTr=checkObject.parentElement.parentElement;
    var salaryStdId=myTr.cells(1).innerText;
    var salaryStdName=myTr.cells(2).innerText;
    salaryStandard=createSalaryStandard(salaryStdId,salaryStdName);
    v=salaryStandard
    }
    window.returnValue=v;

    window.close();

    }
    }
    </script>
      

  6.   

    window.showModalDialog(); 
    或者 window.open();都可以，都能够把选择的内容填写回父页，但是方法不太一样。google下，很容易出
      

  7.   

    我的解决思路是 用css+div+js 控制
    点击按钮时,弹出两个div层,一个大的层盖住整个页面且有透明的效果,另一个层就相当于一个小窗口,
    完成你的收集表单数据用的.当前如果需要访问数据库,你可以用jquery或dwr,我是直接用dwr很方便的
     个人感觉用css+div+js 控制比较好
      

  8.   

    像 Jqeruy等，人家都实现了一大堆，接分