logo

iMAG移动应用开发指南

Select

表单单选框

标签

标签名 描述 说明 子标签
select 表单单选框标签 用于选取单个值 option

属性

属性名 取值 描述
id String id编码
style String
select样式,包括:
name String 表单项名称
value String 表单项的值
remember Boolean 表单提交时是否记住value
true:记住value
false:不记住value,默认值
placeholder String 输入提示
disabled Boolean 禁用状态
true:禁用状态
false:非禁用状态,默认值
options Array 得到Option的数组。只读属性,仅在Javascript中使用
length Integer >= 0 得到Option的个数。只读属性,仅在Javascript中使用
selectedIndex Integer >= 0 选中项的序号。仅在Javascript中使用
onclick Javascript 点击时触发的脚本
onchange Javascript 内容改变时触发的脚本
onfocus Javascript 获得焦点时触发的脚本
onblur Javascript 失去焦点时触发的脚本

方法

方法名 参数 返回值 描述
css(name:String) name:样式名称 String 根据样式名称得到样式的值
css(name:String, value:String)
name:样式名称
value:样式值
None 设置单个样式
css(style:String) style:样式文本,多个样式用分号分隔 None 设置多个样式
css(style:Object) style:样式对象,键值对形式 None 设置多个样式
add(option:Option) option:单选项 None 添加一个Option
remove(index:Integer) index:option的序号 None 删除一个Option
clear() None None 清空所有Option

Option

单选框选项

标签

标签名 描述 说明
option 表单单选框选项标签 select的子标签

属性

属性名 取值 描述
text String 单选项显示的文本
value String 单选项的值
selected Boolean 选中状态
true:已选中
false:未选中,默认值

控件详解

● 单选框

<select id="test_select" name="hobby">
    <option value="basketball">篮球</option>
    <option value="football">足球</option>
</select>

效果:

● 单选框选中项

<select id="test_select" name="hobby">
   <option value="basketball">篮球</option>
   <option value="football" selected="true">足球</option>
</select>

效果:

● 单选框提示

<select id="test_select" name="hobby" placeholder="请选择您的爱好">
   <option value="basketball">篮球</option>
   <option value="football">足球</option>
</select>

效果:

● 禁用单选框

<select id="test_select" name="hobby" disabled="disabled">
   <option value="basketball">篮球</option>
   <option value="football">足球</option>
</select>

效果:

● 修改单选框的值

$('test_select').value = 'football';

● 隐藏单选框

$('test_select').css('display', 'none');
$('test_select').css('display', 'hidden');

● 显示单选框

$('test_select').css('display', 'block');

● 创建单选框

var select = $C('<select id="test_select" name="hobby"/>');
select.add($C('<option value="basketball">篮球</option>'));
select.add($C('<option value="football" selected="true">足球</option>'));
$('test_row').add(select); 

● 单选框联动

<script>
<![CDATA[
var selectData = {"citylist":[
        {"p":"北京","c":[{"n":"东城"},{"n":"西城"},{"n":"崇文"},{"n":"宣武"},{"n":"朝阳"},{"n":"丰台"},{"n":"石景山"},{"n":"海淀"},{"n":"门头沟"},{"n":"房山"},{"n":"通州"},{"n":"顺义"},{"n":"昌平"},{"n":"大兴"},{"n":"怀柔"},{"n":"平谷"},{"n":"密云"},{"n":"延庆"}]},
        {"p":"天津","c":[{"n":"和平"},{"n":"河东"},{"n":"河西"},{"n":"南开"},{"n":"河北"},{"n":"红挢"},{"n":"塘沽"},{"n":"汉沽"},{"n":"大港"},{"n":"东丽"},{"n":"西青"},{"n":"津南"},{"n":"北辰"},{"n":"武清"},{"n":"宝坻"},{"n":"宁河"},{"n":"静海"},{"n":"蓟县"}]},
        {"p":"河北","c":[{"n":"石家庄"},{"n":"唐山"},{"n":"秦皇岛"},{"n":"邯郸"},{"n":"邢台"},{"n":"保定"},{"n":"张家口"},{"n":"承德"},{"n":"沧州"},{"n":"廊坊"},{"n":"衡水"}]},
        {"p":"山西","c":[{"n":"太原"},{"n":"大同"},{"n":"阳泉"},{"n":"长治"},{"n":"晋城"},{"n":"朔州"},{"n":"晋中"},{"n":"运城"},{"n":"忻州"},{"n":"临汾"},{"n":"吕梁"}]},
        {"p":"内蒙古","c":[{"n":"呼和浩特"},{"n":"包头"},{"n":"乌海"},{"n":"赤峰"},{"n":"通辽"},{"n":"鄂尔多斯"},{"n":"呼伦贝尔"},{"n":"巴彦淖尔"},{"n":"乌兰察布"},{"n":"兴安"},{"n":"锡林郭勒"},{"n":"阿拉善"}]},
        {"p":"辽宁","c":[{"n":"沈阳"},{"n":"大连"},{"n":"鞍山"},{"n":"抚顺"},{"n":"本溪"},{"n":"丹东"},{"n":"锦州"},{"n":"营口"},{"n":"阜新"},{"n":"辽阳"},{"n":"盘锦"},{"n":"铁岭"},{"n":"朝阳"},{"n":"葫芦岛"}]},
        {"p":"吉林","c":[{"n":"长春"},{"n":"吉林"},{"n":"四平"},{"n":"辽源"},{"n":"通化"},{"n":"白山"},{"n":"松原"},{"n":"白城"},{"n":"延边"}]},
        {"p":"黑龙江","c":[{"n":"哈尔滨"},{"n":"齐齐哈尔"},{"n":"鸡西"},{"n":"鹤岗"},{"n":"双鸭山"},{"n":"大庆"},{"n":"伊春"},{"n":"佳木斯"},{"n":"七台河"},{"n":"牡丹江"},{"n":"黑河"},{"n":"绥化"},{"n":"大兴安岭"}]},
        {"p":"上海","c":[{"n":"黄浦"},{"n":"卢湾"},{"n":"徐汇"},{"n":"长宁"},{"n":"静安"},{"n":"普陀"},{"n":"闸北"},{"n":"虹口"},{"n":"杨浦"},{"n":"闵行"},{"n":"宝山"},{"n":"嘉定"},{"n":"浦东新"},{"n":"金山"},{"n":"松江"},{"n":"南汇"},{"n":"奉贤"},{"n":"青浦"},{"n":"崇明"}]},
        {"p":"江苏","c":[{"n":"南京"},{"n":"无锡"},{"n":"徐州"},{"n":"常州"},{"n":"苏州"},{"n":"南通"},{"n":"连云港"},{"n":"淮安"},{"n":"盐城"},{"n":"扬州"},{"n":"镇江"},{"n":"泰州"},{"n":"宿迁"}]},
        {"p":"浙江","c":[{"n":"杭州"},{"n":"宁波"},{"n":"温州"},{"n":"嘉兴"},{"n":"湖州"},{"n":"绍兴"},{"n":"金华"},{"n":"衢州"},{"n":"舟山"},{"n":"台州"},{"n":"丽水"}]},
        {"p":"安徽","c":[{"n":"合肥"},{"n":"芜湖"},{"n":"蚌埠"},{"n":"淮南"},{"n":"马鞍山"},{"n":"淮北"},{"n":"铜陵"},{"n":"安庆"},{"n":"黄山"},{"n":"滁州"},{"n":"阜阳"},{"n":"宿州"},{"n":"巢湖"},{"n":"六安"},{"n":"亳州"},{"n":"池州"},{"n":"宣城"}]},
        {"p":"福建","c":[{"n":"福州"},{"n":"厦门"},{"n":"莆田"},{"n":"三明"},{"n":"泉州"},{"n":"漳州"},{"n":"南平"},{"n":"龙岩"},{"n":"宁德"}]},
        {"p":"江西","c":[{"n":"南昌"},{"n":"景德镇"},{"n":"萍乡"},{"n":"九江"},{"n":"新余"},{"n":"鹰潭"},{"n":"赣州"},{"n":"宜春"},{"n":"吉安"},{"n":"抚州"},{"n":"上饶"}]},
        {"p":"山东","c":[{"n":"济南"},{"n":"青岛"},{"n":"淄博"},{"n":"枣庄"},{"n":"东营"},{"n":"烟台"},{"n":"潍坊"},{"n":"济宁"},{"n":"泰安"},{"n":"威海"},{"n":"日照"},{"n":"莱芜"},{"n":"临沂"},{"n":"德州"},{"n":"聊城"},{"n":"滨州"},{"n":"菏泽"}]},
        {"p":"河南","c":[{"n":"郑州"},{"n":"开封"},{"n":"洛阳"},{"n":"平顶山"},{"n":"安阳"},{"n":"鹤壁"},{"n":"新乡"},{"n":"焦作"},{"n":"濮阳"},{"n":"许昌"},{"n":"漯河"},{"n":"三门峡"},{"n":"南阳"},{"n":"商丘"},{"n":"信阳"},{"n":"周口"},{"n":"驻马店"},{"n":"济源"}]},
        {"p":"湖北","c":[{"n":"武汉"},{"n":"黄石"},{"n":"十堰"},{"n":"宜昌"},{"n":"襄樊"},{"n":"鄂州"},{"n":"荆门"},{"n":"孝感"},{"n":"荆州"},{"n":"黄冈"},{"n":"咸宁"},{"n":"随州"},{"n":"恩施"},{"n":"仙桃"},{"n":"潜江"},{"n":"天门"},{"n":"神农架"}]},
        {"p":"湖南","c":[{"n":"长沙"},{"n":"株洲"},{"n":"湘潭"},{"n":"衡阳"},{"n":"邵阳"},{"n":"岳阳"},{"n":"常德"},{"n":"张家界"},{"n":"益阳"},{"n":"郴州"},{"n":"永州"},{"n":"怀化"},{"n":"娄底"},{"n":"湘西"}]},
        {"p":"广东","c":[{"n":"广州"},{"n":"韶关"},{"n":"深圳"},{"n":"珠海"},{"n":"汕头"},{"n":"佛山"},{"n":"江门"},{"n":"湛江"},{"n":"茂名"},{"n":"肇庆"},{"n":"惠州"},{"n":"梅州"},{"n":"汕尾"},{"n":"河源"},{"n":"阳江"},{"n":"清远"},{"n":"东莞"},{"n":"中山"},{"n":"潮州"},{"n":"揭阳"},{"n":"云浮"}]},
        {"p":"广西","c":[{"n":"南宁"},{"n":"柳州"},{"n":"桂林"},{"n":"梧州"},{"n":"北海"},{"n":"防城港"},{"n":"钦州"},{"n":"贵港"},{"n":"玉林"},{"n":"百色"},{"n":"贺州"},{"n":"河池"},{"n":"来宾"},{"n":"崇左"}]},
        {"p":"海南","c":[{"n":"海口"},{"n":"三亚"},{"n":"五指山"},{"n":"琼海"},{"n":"儋州"},{"n":"文昌"},{"n":"万宁"},{"n":"东方"},{"n":"定安"},{"n":"屯昌"},{"n":"澄迈"},{"n":"临高"},{"n":"白沙"},{"n":"昌江"},{"n":"乐东"},{"n":"陵水"},{"n":"保亭"},{"n":"琼中"},{"n":"西沙"},{"n":"南沙"},{"n":"中沙"}]},
        {"p":"重庆","c":[{"n":"渝中"},{"n":"大渡口"},{"n":"江北"},{"n":"沙坪坝"},{"n":"九龙坡"},{"n":"南岸"},{"n":"北碚"},{"n":"万盛"},{"n":"双挢"},{"n":"渝北"},{"n":"巴南"},{"n":"万州"},{"n":"涪陵"},{"n":"黔江"},{"n":"长寿"},{"n":"江津"},{"n":"合川"},{"n":"永川"},{"n":"南川"},{"n":"綦江"},{"n":"潼南"},{"n":"铜梁"},{"n":"大足"},{"n":"荣昌"},{"n":"壁山"},{"n":"垫江"},{"n":"武隆"},{"n":"丰都"},{"n":"城口"},{"n":"梁平"},{"n":"开县"},{"n":"巫溪"},{"n":"巫山"},{"n":"奉节"},{"n":"云阳"},{"n":"忠县"},{"n":"石柱"},{"n":"彭水"},{"n":"酉阳"},{"n":"秀山"}]},
        {"p":"四川","c":[{"n":"成都"},{"n":"自贡"},{"n":"攀枝花"},{"n":"泸州"},{"n":"德阳"},{"n":"绵阳"},{"n":"广元"},{"n":"遂宁"},{"n":"内江"},{"n":"乐山"},{"n":"南充"},{"n":"眉山"},{"n":"宜宾"},{"n":"广安"},{"n":"达川"},{"n":"雅安"},{"n":"巴中"},{"n":"资阳"},{"n":"阿坝"},{"n":"甘孜"},{"n":"凉山"}]},
        {"p":"贵州","c":[{"n":"贵阳"},{"n":"六盘水"},{"n":"遵义"},{"n":"安顺"},{"n":"铜仁"},{"n":"黔西南"},{"n":"毕节"},{"n":"黔东南"},{"n":"黔南"}]},
        {"p":"云南","c":[{"n":"昆明"},{"n":"曲靖"},{"n":"玉溪"},{"n":"保山"},{"n":"昭通"},{"n":"丽江"},{"n":"普洱"},{"n":"临沧"},{"n":"楚雄"},{"n":"红河"},{"n":"文山"},{"n":"西双版纳"},{"n":"大理"},{"n":"德宏"},{"n":"怒江"},{"n":"迪庆"}]},
        {"p":"西藏","c":[{"n":"拉萨"},{"n":"昌都"},{"n":"山南"},{"n":"日喀则"},{"n":"那曲"},{"n":"阿里"},{"n":"林芝"}]},
        {"p":"陕西","c":[{"n":"西安"},{"n":"铜川"},{"n":"宝鸡"},{"n":"咸阳"},{"n":"渭南"},{"n":"延安"},{"n":"汉中"},{"n":"榆林"},{"n":"安康"},{"n":"商洛"}]},
        {"p":"甘肃","c":[{"n":"兰州"},{"n":"嘉峪关"},{"n":"金昌"},{"n":"白银"},{"n":"天水"},{"n":"武威"},{"n":"张掖"},{"n":"平凉"},{"n":"酒泉"},{"n":"庆阳"},{"n":"定西"},{"n":"陇南"},{"n":"临夏"},{"n":"甘南"}]},
        {"p":"青海","c":[{"n":"西宁"},{"n":"海东"},{"n":"海北"},{"n":"黄南"},{"n":"海南"},{"n":"果洛"},{"n":"玉树"},{"n":"梅西"}]},
        {"p":"宁夏","c":[{"n":"银川"},{"n":"石嘴山"},{"n":"吴忠"},{"n":"固原"},{"n":"中卫"}]},
        {"p":"新疆","c":[{"n":"乌鲁木齐"},{"n":"克拉玛依"},{"n":"吐鲁番"},{"n":"哈密"},{"n":"昌吉"},{"n":"博尔塔拉"},{"n":"巴音郭楞"},{"n":"阿克苏"},{"n":"克孜勒苏"},{"n":"喀什"},{"n":"和田"},{"n":"伊犁"},{"n":"塔城"},{"n":"阿勒泰"},{"n":"石河子"},{"n":"阿拉尔"},{"n":"图木舒克"},{"n":"五家渠"}]},
        {"p":"香港"},
        {"p":"澳门"},
        {"p":"台湾","c":[{"n":"台北市"},{"n":"高雄市"},{"n":"基隆市"},{"n":"台中市"},{"n":"台南市"},{"n":"新竹市"},{"n":"嘉义市"},{"n":"台北县"},{"n":"宜兰县"},{"n":"桃园县"},{"n":"新竹县"},{"n":"苗栗县"},{"n":"台中县"},{"n":"彰化县"},{"n":"南投县"},{"n":"云林县"},{"n":"嘉义县"},{"n":"台南县"},{"n":"高雄县"},{"n":"屏东县"},{"n":"台东县"},{"n":"花莲县"},{"n":"澎湖县"}]},
        {"p":"国外"}]};
   
   $page.onload= function() {
       initSelect();
   };
   
   function getDistList(value) {
       for (var i = 0; i < selectData.citylist.length; i++) {
           var city = selectData.citylist[i];
           if (city.p == value) {
               return city.c;
           }
       }
       return null;
   }
   
   function initSelect() {
      var provinceSelect = $('provinceSelect');
      var citySelect = $('citySelect');
      for (var i = 0; i < selectData.citylist.length; i++) {
          var city = selectData.citylist[i];
          provinceSelect.add($C(''));
      }
      provinceSelect.onchange = function() {
          citySelect.clear();
          var distList = getDistList(provinceSelect.value);
          if (distList != null) {
              citySelect.css('display', 'block');
              for (var j = 0; j < distList.length; j++) {
                  var dist = distList[j];
                  citySelect.add($C(''));
              }
          } else {
              citySelect.css('display', 'none');
          }
      };
  }
]]>
</script> 
<select id="provinceSelect" name="provinceSelect" placeholder="请选择省份"></select>
<select id="citySelect" style="display:none" name="citySelect" placeholder="请选择城市"></select>

效果:

示例下载

点此下载select相关的示例代码:imag-select.zip