`
dennisbing
  • 浏览: 159181 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery的select

 
阅读更多

1. 再有iframe框架的时候,找不到select的ID标签

2. 多个select的选中值处理
3. 多个值的分隔方法implode


html代码:
<iframe frameborder="No" scrolling="no" border="0" marginheight="0" marginwidth="0" allowtransparency="true" style="width: 98%; height: 1857px;" src="welcome.php" name="riframe" id="main_iframe">
<html>页面html代码-- 如下方:</html>
</iframe>

<div style="margin-top:25px;">
               <span style="font-family:Arial;font-size:13px;font-weight:bold;">热门电台推荐</span>
               <div style="margin-top:15px;margin-bottom:5px;" class="page_selector">
                    <span style="padding-left:10px;"><span style="padding-right:10px;">1</span> 选择电台</span>
                    <select style="margin-left:10px;margin-right:15px; width:100px;" id="province_1">
                         <option>全部地区</option>
                                                  <option value="34">安徽</option>
                                                  <option value="44">广东</option>
                                                  <option value="35">福建</option>
                                                  <option value="50">重庆</option>
                                                  <option value="62">甘肃</option>
                                                  <option value="11">北京</option>
                                                  <option value="1">全国</option>
                                                  <option value="2">网络电台</option>
                                                  <option value="100">其他</option>
                                                  <option value="45">广西</option>
                                                  <option value="51">四川</option>
                                             </select>
                    <select name="rids[]" style="margin-right:15px; width:100px;" id="radio_1"><option value="">选择电台名称</option>
     <option value="87">城市广播|FM1073</option>
     </select>                   
               </div>
              
               <div style="margin-top:15px;margin-bottom:5px;" class="page_selector">
                    <span style="padding-left:10px;"><span style="padding-right:10px;">2</span> 选择电台</span>
                    <select style="margin-left:10px;margin-right:15px; width:100px;" id="province_2">
                         <option>全部地区</option>
                                                  <option value="34">安徽</option>
                                                  <option value="44">广东</option>
                                                  <option value="35">福建</option>
                                                  <option value="50">重庆</option>
                                                  <option value="62">甘肃</option>
                                                  <option value="11">北京</option>
                                                  <option value="1">全国</option>
                                                  <option value="2">网络电台</option>
                                                  <option value="100">其他</option>
                                                  <option value="45">广西</option>
                                                  <option value="51">四川</option>
                                             </select>
                    <select name="rids[]" style="margin-right:15px; width:100px;" id="radio_2"><option value="">选择电台名称</option>
     <option value="97">音乐广播|FM974</option>
  </select>                   
               </div>
              
  
     
               <div align="center">
                 <strong>
                      <a onclick="manageRecommend();return false;" class="btn_green_s" href="javascript:void(0);"><em>确定</em></a>                        
                    </strong>
             </div>
                 
          </div>

js的代码:
     //所有父类下拉框选择
$("select[id^='province_']").bind("change",
function(){
     var pro_id = $(this).attr('id');
     //找到字母标志位
     var _num = pro_id.indexOf('_');
     var entry_num = parseInt(pro_id.substr(_num+1));
     var curr_var = $(this).val();
     //请求子类型的数据
     var url = 'getradio.php?pid='+curr_var+'&type='+$('#radio_'+entry_num).val()+'&home_manage=have_value';    
     $("#radio_"+entry_num).load(url);
});
     


     //js下数组分割
function implode(glue, pieces) {
    var i = '', retVal='', tGlue='';
    if(arguments.length === 1) {
          pieces = glue;
        glue = '';
    }
    if(typeof(pieces) === 'object') {
        if(pieces instanceof Array) {
               return pieces.join(glue);
          } else {
               for(i in pieces) {
                    retVal += tGlue + pieces[i];
                    tGlue = glue;
               }
               return retVal;
          }
     } else {
        return pieces;
    }
}



//提交 -- 统一推荐管理
function manageRecommend(){
  
     //判断选择的热门电台,并处理电台字符串
     var rid_arr = new Array();
     var k = 0;
     $("select[name=rids[]] option[selected]").each(function() {
          alert("hrere");
          console.log($(this).val());
          if($(this).val() != '') {
               rid_arr[k] = $(this).val();
               k ++;
          }
     });

     var rids = implode(',', rid_arr);


如上有一点,如果实在iframe下家在不到的话,可以用如下方式:
var rid_arr = new Array();
var k = 0;
$("#main_iframe").contents().find("select[name=rids[]] option[selected]").each(function() {
console.log($(this).val());
          if($(this).val() != '') {
               rid_arr[k] = $(this).val();
               k ++;
          }
     });
var rids = implode(',', rid_arr);



还有一点是用来判断是否选择过的 -- 是否选择过重复的电台了。
//判断选择的热门电台,并处理电台字符串,并判断是否有选择重复的电台
     var rid_arr = new Array();
     var k = 0;
     var same_flag = '';
     $("select[name=rids[]] option[selected]").each(function() {
          var this_var = $(this).val();
          if(this_var != '') {
               //查看之前是否已经选择过该电台了,刚添加的就不用对比了
               for(h in rid_arr) {
                console.log(rid_arr[h]);
                    if(rid_arr[h] == this_var){
                         same_flag = 1;
                         return false;
                    }
                   
               }
               rid_arr[k] = this_var;
               k ++;
          }
     });
     if(same_flag == 1){
          $('#actionLayer').show();
          $("#actionLayer").css('left', (($(document).width()) / 2 - (parseInt(355) / 2)) + 'px');
          $('#actionHint').html('请不要推荐重复的电台!');
          return false;
     }else if(rid_arr.length <5){
          $('#actionLayer').show();
          $("#actionLayer").css('left', (($(document).width()) / 2 - (parseInt(355) / 2)) + 'px');
          $('#actionHint').html('至少选择5个热门电台!');
          return false;
     }

分享到:
评论

相关推荐

    jquery select2组件

    **jQuery Select2组件详解** `jQuery Select2`是一款强大的、高度可定制的下拉选择框插件,它在原生HTML `&lt;select&gt;` 元素的基础上提供了丰富的功能和优秀的用户体验。这款组件广泛应用于网页开发中,使得传统的单选...

    jquery select2

    为了解决这些问题,jQuery社区推出了一个强大的插件——jQuery Select2。Select2不仅提供了美观的界面,还增强了用户体验,特别是对于大型数据集的搜索功能,使得在下拉框中快速找到所需选项变得轻而易举。 一、...

    jquery select 多种下拉日期选择插件

    本文将深入探讨“jQuery select 多种下拉日期选择插件”的相关知识点,帮助开发者理解和应用此类插件。 首先,我们来解析标题:“jQuery select 多种下拉日期选择插件”。这个标题暗示了我们正在讨论一个基于jQuery...

    jQuery Select下拉框美化特效.zip

    "jQuery Select下拉框美化特效"就是为了提升用户体验,将原本朴素的Select元素转化为具有视觉吸引力的组件。 该特效主要基于JavaScript库jQuery实现,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件...

    jQuery Select(单选) 模拟插件 V1.3.6

    **jQuery Select(单选) 模拟插件 V1.3.6 知识点详解** 在网页开发中,我们经常需要使用到选择器来获取用户的选择,原生的HTML `&lt;select&gt;` 元素虽然简单易用,但在样式定制和交互效果上往往显得力不从心。为了改善这...

    jQuery select下拉框美化代码.zip

    1. **初始化**:使用jQuery选择器获取所有的`&lt;select&gt;`元素,并为它们添加必要的类或ID,以便于后续的样式应用和事件绑定。 2. **事件监听**:添加事件监听器,如`click`事件,当用户点击下拉框时触发自定义的显示...

    jquery select列表选择框选中美化效果源码

    在“jquery select”这个标签中,我们可以想到几个知名的jQuery插件,例如Select2、Chosen和Bootstrap Select。这些插件通常包含以下核心特性: 1. **自定义样式**:通过CSS样式,可以定制下拉列表的外观,包括字体...

    jquery select插件带搜索框的下拉选择框代码

    &lt;title&gt;jQuery Searchable Select示例 &lt;link rel="stylesheet" href="jquery.searchableSelect.css"&gt; &lt;select id="mySelect"&gt; 选项1 选项2 &lt;!-- 添加更多选项 --&gt; &lt;/select&gt; &lt;script src="jquery-1.11.1....

    80、jquery select下拉框美化代码

    1. **jQuery Select Plugins**: - **Chosen**:Chosen是一个流行的jQuery插件,它提供了可搜索、可选择的多选下拉框,具有良好的用户体验。通过简单的配置,可以轻松地将普通的select元素转换为美观的下拉框。 - ...

    jquery select日历选择器点击select框弹出日期选择器

    jquery select日历选择器点击select框弹出日期选择器 jquery select日历选择器点击select框弹出日期选择器 jquery select日历选择器点击select框弹出日期选择器 jquery select日历选择器点击select框弹出日期选择器

    jQuery Select下拉框关键字匹配查询选择代码

    "jQuery Select下拉框关键字匹配查询选择代码"是关于利用jQuery实现一种功能,即在下拉选择框中通过输入关键字实时筛选出匹配的选项。这种功能常见于许多Web应用中,可以极大地提高用户体验,让用户能够快速找到目标...

    jquery select表单提交省市区城市三级联动

    jquery select表单提交省市区城市三级联动 jquery select表单提交省市区城市三级联动 jquery select表单提交省市区城市三级联动 jquery select表单提交省市区城市三级联动

    jquery select美化插件

    在“jquery select美化插件”这个主题中,我们主要关注的是如何利用jQuery扩展原生的`&lt;select&gt;`元素,使其外观和交互更加友好。 描述中提到的“附带jquery1.5”,意味着这个插件依赖于jQuery 1.5版本。尽管这个版本...

    JQuery SELECT单选模拟jQuery.select.js

    ### jQuery Select单选模拟插件概述 jQuery Select单选模拟插件是一个基于jQuery JavaScript库的插件,主要用于在网页上模拟原生HTML SELECT单选元素的行为和样式。这种插件特别有用,当开发者希望拥有更多自定义...

    jquery select 样式框架

    《jQuery Select样式框架详解》 在网页开发中,选择框(select)是常见的表单元素,但其默认样式往往显得单调且不具吸引力。为此,开发者们常常利用jQuery和其他前端库来增强select元素的视觉效果,使其更符合现代...

    jquery实现select互斥联动

    在本示例中,我们将探讨如何使用jQuery实现“select”元素的互斥联动效果,这是一种常见的表单控件交互设计,常用于多级筛选或配置场景。 一、基本概念 1. jQuery:jQuery 是一个高效、简洁而易用的JavaScript库,...

    jquery select插件.zip

    《jQuery Select插件:打造统一美观的下拉选择体验》 在网页开发中,下拉选择框(Select)是常用的一种交互元素,用于提供多个选项供用户选择。然而,原生的HTML `&lt;select&gt;` 元素在不同浏览器下的表现可能不尽相同...

    select2(jquery)插件下载

    **jQuery Select2插件详解** Select2是一款基于jQuery的增强型下拉选择框插件,它极大地改进了原生HTML `&lt;select&gt;` 元素的用户体验和功能。标题中的"select2(jquery)插件下载"指的是这个插件的获取途径,通常通过...

    jquery selectcombo的用法

    《jQuery SelectCombo插件的深度解析与应用》 在网页开发中,下拉选择框(Select)是最常见的表单元素之一,但其功能相对有限,无法满足复杂的交互需求。为了解决这一问题,jQuery库提供了丰富的插件,其中jQuery ...

    jQuery Select下拉框美化代码

    `jQuery Select下拉框美化代码`就是一个专门解决这一问题的实例,它采用绿色清新风格,并添加了滚动条效果,使得原本单调的下拉框变得更具吸引力。 首先,我们需要了解jQuery库。jQuery是一个广泛使用的JavaScript...

Global site tag (gtag.js) - Google Analytics