Html select 事件 改变标签值

SmartBeanDad 2014-08-31 04:10:44
<tr>
<td >
<select name="searchway" onchange="changetip(this.value)">
<option value=0>商品</option>
<option value=1>号码</option>
<option value=2>店名</option>
<option value=3>姓名</option>
<option value=4>地址</option>
</select>
</td>
</tr>
<tr>
<td>请输入条件*****</td>
</tr>
<tr>
<td><input type="text" id="keywords" name="textfield"/></td>
</tr>
<tr>
<td > <input type="submit" name="Submit" value=" 查询 " /></td>
</tr>

以上代码,想要在客户端实现这样一个功能:当用户选择 Select 时,按照用户选择项目的不同,分别在 “ 请输入条件**** ” 字样的位置显示 “ 请输入商品名称“,或 “ 请输入店名 ” 或 “ 请输入姓名 ” 等,不要重新读取服务器数据
哪位高手指点一下,谢了
...全文
893 3 打赏 收藏 举报
写回复
3 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
SmartBeanDad 2014-09-01
  • 打赏
  • 举报
回复
zy205817 的代码可以实现正确输出,但是不是改变输出位置,提示信息总是显示在网页的正中,这样会影响最终的用户体验啊,请问怎样才能把输出信息放在任意位置呢?
码无边 2014-08-31
  • 打赏
  • 举报
回复

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  
  <title>JS Bin</title>
  <script>
    function changetip(value){
      var _td = $("table tr:eq(1) td:nth-child(1)");
      if (value == 0){
        _td.html("请输入商品");
      }
      if (value == 1){
        _td.html("请输入号码");
      }
      if (value == 2){
        _td.html("请输入店名");
      }
      if (value == 3){
        _td.html("请输入姓名");
      }
      if (value == 4){
        _td.html("请输入地址");
      }
      
    }
  </script>
</head>
<body>
  <table>
<tr>            
            <td>
            <select name="searchway" onchange="changetip(this.value)">
               <option value=0>商品</option>
               <option value=1>号码</option>
               <option value=2>店名</option>
               <option value=3>姓名</option>
               <option value=4>地址</option>               
             </select>                  
            </td>            
          </tr>       
          <tr> 
              <td>请输入条件*****</td>            
          </tr>
          <tr>  
             <td><input type="text"  id="keywords" name="textfield"/></td>
          </tr>
          <tr>          
              <td > <input type="submit" name="Submit" value="    查询   " /></td>
          </tr>
  </table>
</body>
</html>
http://jsbin.com/gufakubexehi/2/edit
xuzuning 2014-08-31
  • 打赏
  • 举报
回复
<script>
var st = [];
function changetip(s) {
  if(st.length == 0) {
    var el = s.parentNode;
    while(el.nodeName != 'TR') {
      el = el.parentNode;
    }
    el = el.parentNode.rows[el.rowIndex + 1];
    st.push(el.cells[0]);
    st.push(el.cells[0].innerHTML.replace(/\*/g, ''))
  }
  st[0].innerHTML = st[1] + s.options[s.selectedIndex].text;
}
</script>
<table>
<tr>            
            <td >
            <select name="searchway" onchange="changetip(this)">
               <option value=0>商品</option>
               <option value=1>号码</option>
               <option value=2>店名</option>
               <option value=3>姓名</option>
               <option value=4>地址</option>               
             </select>                  
            </td>            
          </tr>       
          <tr> 
              <td>请输入条件*****</td>            
          </tr>
          <tr>  
             <td><input type="text"  id="keywords" name="textfield"/></td>
          </tr>
          <tr>          
              <td > <input type="submit" name="Submit" value="    查询   " /></td>
          </tr>
</table>
相关推荐
发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2014-08-31 04:10
社区公告
暂无公告