angularjs---select使用---默认值及联动

代码

一. select设置默认显示内容&&获取下拉框显示内容.

HTML

<div>
  <select ng-model="current_option" ng-options="option.key for option in option_array"> </select>
</div>

JS

$(function()
{
    /**** 设置下拉框显示内容 ****/
    $scope.option_array = [
        {"key" : "hello", "value" : 1},
        {"key" : "world", "value" : 2},
    ];
    $scope.current_option = $scope.option_array[0];  // 下拉框默认显示内容

    console.log($scope.current_option.key);              // 获取下拉框显示内容
    console.log($scope.current_option.value);         // 获取下拉框显示内容对应的值
})

二. select二级联动.
HTML

<div>
  <select ng-model="current_option" ng-options="option.key for option in option_array" ng-change="current_option_change()"> </select>
</div>
<div>
  <select ng-model="child_current_option" ng-options="option.key for option in child_option_array"> </select>
</div>

JS

$(function()   // 这是动作, 立即执行
{
    /**** 设置父下拉框显示内容 ****/
    $scope.option_array = [
        {"key" : "hello", "value" : 2},
        {"key" : "world", "value" : 2},
    ];
    $scope.current_option = $scope.option_array[0];          // 父下拉框默认显示内容

    /**** 初始加载时根据父下拉框内容显示子下拉框内容 ****/
    $scope.child_change_with_father();
})

/**** 根据父下拉框当前显示内容设置子下拉框内容 ****/
$scope.child_change_with_father = function ()                        // 这是方法, 调用执行
{
    if ("hello" == $scope.current_option.key)
    {
        $scope.child_option_array = [
            {"key" : "hello_child_one", "value" : 1},
            {"key" : "hello_child_two", "value" : 2},
        ];
    }
    else if ("world" == $scope.current_option.key)
    {
        $scope.child_option_array = [
            {"key" : "world_child_one", "value" : 3},
            {"key" : "world_child_two", "value" : 4},
        ];
    }
    $scope.child_current_option = $scope.child_option_array[0];  // 子下拉框默认显示内容
}

$scope.current_option_change = function()
{
    $scope.child_change_with_father();
}
时间: 2024-10-11 18:04:37

angularjs---select使用---默认值及联动的相关文章

js动态设置select的默认值

根据需求动态的设置select的默认值,若要选定默认则代码selected="selected".动态设置则如下所示: <html> <table> <tr> <td width="250" align="left"> <select name="job" size="1" > <option value="普通会员"&g

给select设置默认值,在option在页面上已经写死的情况下

从后台传来数据 request.setAttribute("time", time), time有year.month属性, 而前台页面上的select中的option却已写死, 可以通过 jstl 表达式来进行判断. 这种写法只可以对简单的数据进行判断.  <select id="month" name="month">      <c:forEach var="item" begin="1&qu

弹窗中修改select默认值遇到的问题

弹窗中修改select默认值无效 前提: 项目中遇到一个需求, 在一个弹窗中,有很多个select都是在打开弹窗的同时由js自动生成的(每次打开都自动重新生成一遍). 弹窗打开后,从每个select的下拉选中选中一个值.然后弹窗下面有个确定按钮. 点确定 按钮,将每个select选中的值保存起来. 下次再次打开弹窗时,每个自动生成的select中都默认值显示上次选中的值. 我的思路是: 1.在每次点 确定 按钮 时: 新建一个 js 对象jsonObj,每次点 确定后把 每个select的id(

ComboGrid二级联动以及给二级联动赋默认值

//调用二级联动方法$(function () { combogridTwo("#upAdClass","#upAdPage");//连接地址二级联动方法封装 修改 combogridTwo("#adAdClass","#adAdPage");//连接地址二级联动方法封装 添加 } /* * @Description combogrid 二级联动方法封装 * * @Author wzf * @Date 2018/10/27 1

JSP的3种方式实现radio ,checkBox,select的默认选择值

JSP的3种方式实现radio ,checkBox,select的默认选择值.以radiao 为例:第一种方式:在jsp中使用java 脚本,这个方法最直接,不过脚本太多,不容易维护<%String state = request.getParrameter("state" )%> <td width="27"><input type="radio" name="state" value=&quo

angularjs select 三级联动

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>angularjs select 三级联动</title> <script type="text/javascript" src="http://cdn.angularjs.cn/angularjs/1.3.0-beta.17/angular.js"&

Mysql select语句设置默认值

1.在没有设置默认值的情况下: SELECT userinfo.id, user_name, role, adm_regionid, region_name , create_time FROM userinfo LEFT JOIN region ON userinfo.adm_regionid = region.id 结果: 设置显示默认值: SELECT userinfo.id, user_name, role, adm_regionid, IFNULL(region_name,0) as

慎用create table as select,一定要注意默认值的问题

再做一些数据迁移时候,很多人会使用create table  as select * from table where id=-1的方式来年建立一摸一样的表,但是这样做有个很大的弊端,不能将原表中的default value也一同迁移过来,可以看下面的例子: 第一,新建一个表 -- Create table create table table01 (   id        number(16),   add_date  date default sysdate,   status    nu

Django forms select默认值和选中值的展示

Django的forms和models一样很牛逼.他有两种功能,一是生成form表单,还有就是form表单的验证. 这里主要说一下生成form表单时经常用到的需要设置默认值的梁总情况. 1. 需要默认生成select时,设置默认选中的选项. 在django/forms/widgets.py文件中 这里有个_empty_value字段就是设置默认值的. 在创建form时,配置默认选项: 2. 从数据库里查询导数据到前端展示时,如何在前端选中的指定的选项. 将数据库中查询出来的选中的authors的