jquery的select-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_16607/article/details/82094356

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

2. 多个select的选中值处理

3. 多个值的分隔方法implode

html代码：

<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;
     }