【问题标题】:html select tag: on select get value from another select taghtml 选择标签:在选择时从另一个选择标签中获取值
【发布时间】:2017-05-04 14:29:09
【问题描述】:

我有两个 Select 标签:第一个是动态填充的 php 脚本(扫描我的非空文件夹)并给我国家代码如下:

         <select name="countries" id="countries"> 
         <option>fr</option>
         <option>gr</option>
         <option>it</option>
         <option>gr</option>
         <option>pl</option>
         <option>gb</option>
         <option>es</option>
         <option>pt</option>
                  ... 
         (dynamically populated from a php script)
    </select>

第二个 SELECT 是一个完整的国家/地区列表,其代码已经填充:

    <select name="ctCodes" id="ctCodes">
    <option>--select--</option>
    <option value="fr">France</option>
    <option value="nl">Netherlands</option>
    <option value="bl">Belgium</option>
    <option value="rs">Russia</option>
                   ... 
      (full ready list with all countries and code as value)
    </select>

我不希望我的访问者从第一个 SELECT 中进行选择,因为它只是代码(fr、de、..),但我希望他从更全面的列表中选择全名国家(法国、德国.. ) 其中选项值会将他重定向到所选国家:例如,他选择德国,我的函数将带他:location.href = "xxx.php#" + element.value;) 在这种情况下为'de'。

如何实现这一点:创建第三个 SELECT 标记,根据第一个从完整下拉列表中添加选项? ..是否有解决方案只过滤第二个 SELECT tAG 中的全名列表以仅保留第一个中加载的选项? ...我知道这是 sql 或 ms-access 的纳秒工作!.. 但是可以使用 html 和 javascript 来完成吗? 我很感激所有的答案。

【问题讨论】:

  • 您想在哪里获取这些数据以及您在处理什么?一个 Javascript 函数,在 PHP 中提交数据(POST 请求),也许还有别的?
  • 大约有两个列表(选择标签),第一个是从 php 填充的(工作得很好),第二个是所有国家的完整列表,其代码为“值”
  • 我只想从第一个选择中选择一个选项时,我从第二个列表中获取值..以加载特定的 html 页面:类似 function clic(element) { objForm = document.MyForm ; location.href = "xxx.php#" + element.value; (这个值必须是从完整列表中选择的国家代码)}

标签: html function select


【解决方案1】:

在第一个select 中,id 为#country

var e = document.getElementById("country");
var value = e.options[e.selectedIndex].value;

在此代码中,value 将包含 country name(如果它是值)。

var textVar = e.options[e.selectedIndex].text;

如果国家名称是text,它将存储在textVar

现在你想自动选择第二个选择使用onchange,选择ID为country

现在第二次选择 id ctCodes

var element = document.getElementById('ctCodes');
element.value = value;

使用此代码设置 select 的值。

【讨论】:

    猜你喜欢
    • 2017-02-21
    • 2015-09-01
    • 2012-01-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-11-22
    • 2020-08-24
    • 2013-10-28
    相关资源
    最近更新 更多