layui如何得到select值

1. layui如何获取select的值

使用layui框架可以轻松地获取select元素的值。我们可以通过两种方式来实现：

1.1 通过form.on监听select

form.on可以监听所有形式的表单操作，不仅仅是select。当用户选中或改变select中的选项时，我们可以通过form.on监听到这个事件，并获取到select当前的值：

layui.use('form', function(){
  var form = layui.form;
  //监听select
  form.on('select', function(data){
    console.log(data.value); //打印select当前的值
  });
});

在上面的代码中，我们使用了layui.use方法引入了form模块，并创建了一个form实例。然后通过form.on函数监听了select事件，并将当前选中的值打印出来。

1.2 直接获取select元素的值

另一种获取select值的方法是直接获取select元素的值，这种方法比较简单，但需要注意的是需要在select元素中添加一个lay-filter属性，用于筛选需要获取值的元素。

<select name="city" lay-filter="test">
  <option value="0">北京</option>
  <option value="1">上海</option>
  <option value="2">广州</option>
</select>
<script>
layui.use('form', function(){
  var form = layui.form;
  //直接获取select值
  var val = $('select[name=city]').val();
  console.log(val); //打印select当前的值
});
</script>

在上面的代码中，我们使用了jQuery选择器来获取select元素，并通过val方法获取了当前选中的值。

2. 实例演示

下面我们来实现一个简单的select元素示例，以便更好地理解上述两种方法：

<div class="layui-inline">
  <label class="layui-form-label">城市</label>
  <div class="layui-input-inline">
    <select name="city" lay-filter="city">
      <option value="0">北京</option>
      <option value="1">上海</option>
      <option value="2">广州</option>
    </select>
  </div>
</div>
<div class="layui-inline">
  <label class="layui-form-label">区县</label>
  <div class="layui-input-inline">
    <select name="area" lay-filter="area">
      <option value="0">请选择区县</option>
    </select>
  </div>
</div>
<script>
layui.use(['form', 'jquery'], function(){
  var form = layui.form;
  var $ = layui.jquery;
  //监听市级选择器的值
  form.on('select(city)', function(data){
    //获取当前选中的值
    var city_value = data.value;
    if(city_value == "0"){
      //如果北京被选中，则清空区县信息，不做任何操作
      $('select[name=area]').html('<option value="0">请选择区县</option>');
    }
    else if(city_value == "1"){
      //如果上海被选中，则在区县信息中添加上海市的所有区县
      $('select[name=area]').html('<option value="0">请选择区县</option><option value="1">黄埔区</option><option value="2">徐汇区</option><option value="3">长宁区</option><option value="4">静安区</option><option value="5">普陀区</option>');
    }
    else if(city_value == "2"){
      //如果广州被选中，则在区县信息中添加广州市的所有区县
      $('select[name=area]').html('<option value="0">请选择区县</option><option value="6">天河区</option><option value="7">越秀区</option><option value="8">荔湾区</option><option value="9">海珠区</option><option value="10">番禺区</option>');
    }
    //重新渲染区县选择器，让改变生效
    form.render('select');
  });
});
</script>

在上面的代码中，我们创建了两个select元素，一个是城市选择器，一个是区县选择器。区县选择器初始时只有一个"请选择区县"的选项，当城市选择器的值发生改变时，我们就监听到了该事件，并根据城市选择器的值来显示对应的区县信息。

3. 总结

获取select元素值的方法并不复杂，使用layui框架更加简单明了。我们可以通过form.on监听select事件并获取当前选中的值，也可以直接获取select元素的值。在实际开发中，根据具体需求选择适合的方法来获取select值是非常必要的。