为国家选择数字时，将 jQuery 后面的数字放在后面

Posted 2023-05-09

【中文标题】为国家选择数字时，将 jQuery 后面的数字放在后面

【英文标题】：When choosing numbers for countries, put the numbers that follow by jQuery

【发布时间】：2021-07-17 05:05:01

【问题描述】：

现在我有一个问题，我想解决它

我创建了一个随机猜测数字的网站，当添加多个国家时，我需要添加国家编号之后的数字，就像埃及的 +20 之后的 10，我通过规则创建了一个代码 if不实用

jq 代码：

 $( ".countrycode select" ).change(function() 
    var ccs = document.querySelector(".companycode select"), countrycs = $(".countrycode select").val();
  if ( countrycs === "966") 
    var optcont = "<option value='50'>50</option>" + "<option value='53'>53</option>" + "<option value='54'>54</option>" + "<option value='55'>55</option>" + "<option value='56'>56</option>"  + "<option value='58'>58</option>" + "<option value='59'>59</option>"  ;
    ccs.innerhtml = optcont;
     else if ( countrycs === "20") 
      var optcont = "<option value='10'>10</option>" + "<option value='11'>11</option>" + "<option value='12'>12</option>"  ;
      ccs.innerHTML = optcont;
     else if ( countrycs === "971") 
      var optcont = "<option value='50'>50</option>" + "<option value='52'>52</option>" + "<option value='54'>54</option>" + "<option value='55'>55</option>" + "<option value='56'>56</option>" + "<option value='58'>58</option>" ;
      ccs.innerHTML = optcont;
     else if ( countrycs === "964") 
      var optcont = "<option value='73'>73</option>" + "<option value='74'>74</option>" + "<option value='75'>75</option>" + "<option value='76'>76</option>" + "<option value='77'>77</option>" + "<option value='78'>78</option>" + "<option value='79'>79</option>" ;
      ccs.innerHTML = optcont;
     else if ( countrycs === "213") 
      var optcont = "<option value='5'>5</option>" + "<option value='6'>6</option>" + "<option value='7'>7</option>" ;
      ccs.innerHTML = optcont;
     else if ( countrycs === "962") 
      var optcont = "<option value='79'>79</option>" ;
      ccs.innerHTML = optcont;
     else if ( countrycs === "965") 
      var optcont = "<option value='5'>5</option>" + "<option value='6'>6</option>" + "<option value='9'>9</option>" ;
      ccs.innerHTML = optcont;
     else if ( countrycs === "218") 
      var optcont = "<option value='91'>91</option>" + "<option value='92'>92</option>" + "<option value='94'>94</option>" + "<option value='95'>95</option>" ;
      ccs.innerHTML = optcont;
    
    

请帮忙

【问题讨论】：

你说的是电话号码国家代码吗？

我说的是国家数字后面的数字，比如：[phone]+20后面的数字是“10”就是我的意思

您需要知道国家代码有多少位，所以您知道要跳过多少位才能得到其余的？

进入猜测的人选择了这些走廊，如果一个进程添加了太多国家，这是一个规则。

真的不清楚你在做什么。你说网站猜数字。

【参考方案1】：

使用您的所有值创建一个对象并使用这些值来构建新的<option>

function getOptions(code) 
  const countryData = 
    20: ["10", "11", "12"],
    971: ["50", "52", "54", "55", "56", "58"],
    964: ["73", "74", "75", "76", "77", "78", "79"],
    966: ["50", "53", "54", "55", "56", "58", "59"],
  
  const opts = countryData[code].map(v => new Option(v, v))
  opts.unshift(new Option('- Company -', ''));
  return opts


$('.countrycode select').change(function() 
  const options = getOptions(this.value);
  $('.companycode select').html(options)
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="countrycode">
  <select>
    <option value=""> -- </option>
    <option value="20">20</option>
    <option value="964">964</option>
    <option value="966">966</option>
    <option value="971">971</option>
  </select>
</div>

<div class="companycode">
  <select></select>
</div>

【参考方案2】：

Ok Mohamed ^对我来说简单的方法是使用data属性

像<option data-numbers ="[10 , 11 , 12]"这样给<option>添加data属性，你可以通过$('option:selected' , this).data('numbers')得到它

在 .change 事件中使用 .each 循环遍历代码数组并将其附加到选项中 += <option>

使用$('.companycode select').html(options); 将companycode select 更改为新选项

$('.countrycode select').on('change' , function()
  const codes = $('option:selected' , this).data('numbers'); // Get the array of codes
  let options = '';                                          // define options before update it inside the loop .. you can set it to options = '<option value="">Select Company Code</option>'
  $.each(codes , function(i , code)                         // loop through the array of codes
    options += `<option value=$code>$code</option>`;     // update options with the codes in array
  );
  $('.companycode select').html(options);                    // change the comapnycode select
).change();                                                 // .change() at the end here will fire this change event onload

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="countrycode">
  <select>
    <option value="20" data-numbers ="[10 , 11 , 12]">Egypt +20</option>
    <option value="971" data-numbers ="[50 , 52 , 53 , 54 , 55 , 56 , 58]">United Arab Emarates +971</option>
  </select>
</div>
<div class="companycode">
  <select></select>
</div>

【讨论】：

如果你使用.data('numbers')，jQuery 会自动将其解析为 JSON。

赞美上帝，谢谢你，我的朋友，谢谢你，问题已经解决了

不客气 ya sahby @MohamedAnwar .. 祝你有美好的一天 :-) .. charlietfl 的回答也很好，所以看看它:-) .. 两种方式都可以:-)