获取下拉框的文本值

获取下拉框的文本值

这次分享的是获取下拉框的文本值，这里写了两种获取下拉框文本值的方法，一种是写实的，一种是用数据库数据绑定上去的，用数据库数据绑定的两个都可以用，不过为了不重复就使用另一种方法。
首先准备一个写实的下拉框和一个数据库数据绑定的下拉框，还有两个文本框，用来显示两个下拉框文本值的。HTML代码如下：

 <div> 
    <p>写实</p>
      <select id="Select1">
          <option value="1">第一个</option>
          <option value="2">第二个</option>
          <option value="3">第三个</option>
      </select>
      <input id="Input1"/>

      <p>数据库</p>
      <select id="Select2"></select>
      <input id="Input2"/>
 </div>

第一种方法：首先给写实下拉框一个改变事件，在改变事件里面获取它的value值，然后用eq第几行获取一下它的text就可以获取到下拉框文本值，在这里要注意eq是从0开始，我的value值是从1开始，所以我要减1，代码如下：

 //写实下拉框
 $("#Select1").change(function () {
   	 var ID = $("#Select1").val();
     var Text = $("#Select1 option:eq(" + (parseInt(ID) - 1) + ")").text();
     $("#Input1").val(Text);
 });

效果1：

第二种方法：首先在页面加载时，查询数据库里面的数据把它绑定到下拉框上，把它的id作为value值，把它的name作为文本值，代码如下：

  //页面加载事件
  $(function () {
       $.post("SelectDropDown", function (S) {
           for (var i = 0; i < S.length; i++) {
               $("#Select2").append('<option value="' + S[i].id + '">' + S[i].name + '</option>');
           }
       });
   });

控制器代码：

public ActionResult SelectDropDown()
{
     var list = myModels.D_DropDown.
       Select(m => new { id = m.DropDownID, name = m.DropDownName }).ToList();
     return Json(list, JsonRequestBehavior.AllowGet);
}

然后给它一个改变事件，在改变事件里面获取它的value值，因为它的value值是id，所以获取这个id去数据库里面查相对应的值，获取到值后返回给页面的文本框上面，代码如下：

 //数据库
 $("#Select2").change(function () {
     var ID = $("#Select2").val();
     $.post("SelectDropDownID", { ID: ID }, function (S) {
         $("#Input2").val(S.DropDownName);
     });
 });

控制器代码：

 public ActionResult SelectDropDownID(int ID)
 {
        var list = myModels.D_DropDown.
          Where(m => m.DropDownID == ID).Single();
        return Json(list, JsonRequestBehavior.AllowGet);
 }

效果2：