jquery操作select实现根据拼音动态获取姓名列表

功能简单,但是易忘,留存以备后用
js端

<script type="text/javascript">
jqXHR.status:[" + jqXHR.status + "]"
                    +"jqXHR.readyState:[" + jqXHR.readyState + "]"
                    +"textStatus:[" + textStatus + "]"
                    +"errorThrown:[" + errorThrown + "]");
            }
        });
    }

    function createSelName() {
        // alert("--------");
        var selValue=$("#person").attr("value");
        if (selValue != "") {
            selValue += ";";
        }
        selValue += $("#personName").find("option:selected").text();
        $("#person").attr("value",selValue);
        $("#pinYin").val("");
        $("#personName").hide();
    }
    //-->
script>

jsp页面:

<div class="control-group">
    
    <div class="controls form-inline">
        id="pinYin" style="width:60px" onkeyup="javascript:getNameByPinYin();"/>
        id="person" name="person" placeholder="多个姓名之间以分号分隔" class="input-xxlarge" type="text" value=""/>
        
    div>
div>

附录:

<script language="javascript">
    $(document).ready(function() {
      //绑定下拉框change事件,当下来框改变时调用 SelectChange()方法
      $("#selectID").change(function() { SelectChange(); }); 
      })
      function SelectChange() {
      //获取下拉框选中项的text属性值
      var selectText = $("#selectID").find("option:selected").text();
      alert(selectText);
      //获取下拉框选中项的value属性值
      var selectValue = $("#selectID").val();
      alert(selectValue);
      //获取下拉框选中项的index属性值
      var selectIndex = $("#selectID").get(0).selectedIndex;
      alert(selectIndex);
      ////获取下拉框最大的index属性值
      var selectMaxIndex = $("#selectID option:last").attr("index");
      alert(selectMaxIndex);
  }

  function aa() {
      //设置下拉框index属性为5的选项 选中
      $("#selectID").get(0).selectedIndex = 5;  
  }
  function bb() {
      //设置下拉框value属性为4的选项 选中
      $("#selectID").val(4);
  }
  function cc() {
      //设置下拉框text属性为5的选项 选中
       $("#selectID option[text=5]").attr("selected", "selected");
       $("#yyt option:contains('5')").attr("selected", true);
  }
  function dd() {
      //在下拉框最后添加一个选项
      $("#selectID").append("");
  }
  function ee() {
      //在下拉框最前添加一个选项
      $("#selectID").prepend("")
  }
  function ff() {
      //移除下拉框最后一个选项
      $("#selectID option:last").remove();
  }

  function gg() {
      //移除下拉框 index属性为1的选项
      $("#selectID option[index=1]").remove();
  }

  function hh() {
      //移除下拉框 value属性为4的选项
      $("#selectID option[value=4]").remove();
  }
  function ii() {
      //移除下拉框 text属性为5的选项
      $("#selectID option[text=5]").remove();
  }  
  function clearAll() {
      //清空
      $("#selectID option").remove();
  } 
  function clearSel() {
      //清空选中的项
      $("#selectID option:selected").remove();
  } 
$("select").hide();      // 隐藏下拉框
$("select").show();      // 显示下拉框
$("select").toggle();    // 如果下拉框是显示的则隐藏之,反之亦然   
  script>

杂项,未验证

获取选中的值
获取一组radio被选中项的值

var item = $(“input[@name=items]:checked”).val();
获取select被选中项的文本

var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当前选中值

$('#select_id')[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值

$('input[@name=items]').get(1).checked = true;
获取值:
文本框,文本区域:

$("#txt").attr("value");

$("#txt").val();
多选框checkbox:

$("#checkbox_id").attr("value");
单选组radio:

$("input[@type=radio][@checked]").val();
下拉框select$('#sel').val();
控制表单元素:
文本框,文本区域:

$("#txt").attr("value",'');//清空内容
$("#txt").attr("value",'11');//填充内容
多选框checkbox:

$("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined) //判断是否已经打勾
单选组radio:

$("input[@type=radio]").attr("checked",'2');
//设置value=2的项目为当前选中项
下拉框select$("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
$("11112222")
.appendTo("#sel")//添加下拉框的option
$("#sel").empty();//清空下拉框


在jQuery中,用$("#id")来获得页面的input元素,其相当于document.getElementById("element")但是,该获取的是一个jquery对象,而不是一个dom element对象.value是dom element对象的属性.所以,使用$("#id").value不能取到值取值的方法如下:

取值:

val = $("#id")[0].value;
$("#id")[0].value = "new value";
赋值:

$("#id")[0].value = "new value";
或者$("#id").val("new value");
val = $("#id").attr("value");

你可能感兴趣的:(html)