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

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

<script type="text/javascript">
<!--
    function getNameByPinYin() {
        var url = "/kq/psm/psn/getNameByPinYin-" + $("#pinYin").val();
        $.ajax({
            headers : {
                'Accept' : 'application/json',
                'Content-Type' : 'application/json'
            },
            type : 'GET',
            dataType : 'json',
            contentType : 'application/json;utf-8',
            cache : false,
            async : false,
            timeout : 30000,
            url : url,
            data : null,
            success : function(message, textStatus, jqXHR) {
                // 清空下拉框中所有姓名
                $("#personName option").remove();
                $("#personName").show();
                $.each(message.object, function(key, value) { 
                    var tmpStr = "<option value='" + key + "'>" + value + "</option>";
                    $("#personName").append(tmpStr);
                });
            },
            error : function(jqXHR, textStatus, errorThrown) {
                alert("error-->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">
    <label class="control-label" for="input01">人员姓名:</label>
    <div class="controls form-inline">
        <input id="pinYin" style="width:60px" onkeyup="javascript:getNameByPinYin();"/>
        <input id="person" name="person" placeholder="多个姓名之间以分号分隔" class="input-xxlarge" type="text" value=""/>
        <select name="personName" id="personName" size="20" style="display:none" onchange="javascript:createSelName();"></select>
    </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("<option value='7'>7</option>");
  }
  function ee() {
      //在下拉框最前添加一个选项
      $("#selectID").prepend("<option value='0'>0</option>")
  }
  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的项目为当前选中项
$("<optionvalue='1'>1111</option><optionvalue='2'>2222</option>")
.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");