当其他下拉列表更改时，如何更改下拉列表的值？答案

【问题标题】：How to change values of a dropdown list when a other dropdown list has changed?当其他下拉列表更改时，如何更改下拉列表的值？
【发布时间】：2015-09-25 09:27:00
【问题描述】：

好的，编辑：

这些都是事实，

我有 4 个下拉列表，ddl1、ddl2、ddl3 和 ddl4

现在我想检查 ddl1.value 是否为“deutschsprachige Länder”。 如果是这样，那么我想用 english_opt2 中的选项 填充 ddl3 和 用 填充 ddl4来自english_opt1的选项。

当 ddl2.value 为 "englischsprachige Länder" 时，我想用 German_opt2 中的选项填充 ddl3 strong> 并用 German_opt1 中的选项填充 ddl4。

如果可能的话，我想自动选择旧值/索引（只是在新语言中。）

ddl1 = this.getField("DeutschL");
ddl2 = this.getField("EnglischL");
ddl3 = this.getField("Anrede");
ddl4 = this.getField("Andere Gründe");

english_opt1 =   ["Mögliche andere Gründe auswählen!", 
                 "The recipient is no longer working at that company.",
                 "The recipient is on vacation.", "The recipient is on vacation.",
                 "The receiver is sadly passed away.",
                 "The receiver could not be reached by telephone 3 times.",
                 "The door / access / security code is required.",
                 "The specified address is a flea market.",
                 "The specified address is a Christmas market.",
                 "The specified address is fair.",
                 "The specified telephone number does not belong to the receiver.",
                 "The specified telephone number is not assigned.",
                 "The company is currently closed for summer break.",
                 "The company is currently closed for winter break.",
                 "The company no longer exists.",
                 "The company / the store has closed for renovation.",
                 "There are school holidays in Brandenburg.",
                 "There are school holidays in Berlin."];

german_opt1 =   ["Mögliche andere Gründe auswählen!", 
                "Der Empfänger arbeitet nicht mehr bei dieser Firma.", 
                "Der Empfänger ist im Urlaub.",
                "Der Empfänger ist leider verstorben.", 
                "Der Empfänger konnte 3x telefonisch nicht erreicht werden.", 
                "Der Tür/ Zugangs/ Sicherheits Code ist erforderlich.", 
                "Die angegebene Adresse ist ein Flohmarkt.",
                "Die angegebene Adresse ist ein Weihnachtsmarkt.", 
                "Die angegebene Adresse ist eine Messe.", 
                "Die angegebene Telefonnummer gehört nicht zum Empfänger.", 
                "Die angegebene Telefonnummer ist nicht vergeben.", 
                "Die Firma befindet sich in der Sommerpause.",
                "Die Firma befindet sich in der Winterpause.",
                "Die Firma existiert nicht mehr.", 
                "Die Firma / das Geschäft hat wegen Umbau geschlossen.", 
                "Es sind Schulferien in Brandenburg.",
                "Es sind Schulferien in Berlin."];

english_opt2 =   ["Anrede auswählen!",
                 "Ladies and Gentleman",
                 "Mr.",
                 "Mrs.", 
                 "Family",
                 "Employee of"];

german_opt2 =   ["Anrede auswählen!", 
                "Damen und Herren", 
                "Herr", 
                "Frau", 
                "Mitarbeiter der Firma", 
                "Familie"];

【问题讨论】：

跟Adobe Acrobat没关系，是的，用纯js就可以轻松搞定，我教给你。
我会在一个小时左右看看你的更新。
有可能发生冲突，因为在一种情况下，语言字符串是从 ddl1 设置的，而在另一种情况下是从 ddl2 设置的。当 ddl1 是“deutschsprachige Länder”，而 ddl2 是“englischsprachige Länder”时会发生什么？

标签： javascript arrays drop-down-menu acrobat

【解决方案1】：

这是最简单、最有效的面向对象方式。

Here is the JSFiddle demo

//代码

<!DOCTYPE html>
<html>
<head>
<script>
var langs = {
    "eng":["one","two","three"],
    "ger":["eins","zwei","drei"]    
};
document.onreadystatechange = function(){
    if(document.readyState == "interactive"){
        document.getElementById("drop1").addEventListener("change",updateDrop);
    }
}
function updateDrop(e){
    var drop = document.getElementById("drop2");
    while(drop.firstChild){
        drop.removeChild(drop.firstChild);
    }
    for(var i=0; i < langs[e.target.value].length; i++){
        var opt = document.createElement("option");
        opt.value = langs[e.target.value][i];
        opt.innerHTML = langs[e.target.value][i];
        drop.appendChild(opt);
    }       
}
</script>
</head>
<body>
    <select id="drop1">
        <option selected disabled>Choose Language</option>
        <option value="eng">English</option>
        <option value="ger">German</option>
    </select>
    <select id="drop2"></select>
</body>
</html>

【讨论】：

【解决方案2】：

您可以使用<select name="language" onchange="changeNumbers()"> 并在 Javascript 中添加以下代码：

function changeNumbers(lang_val) {
  english_nums = ['one', 'two', 'three'];
  german_nums = ['eins', 'zwei', 'drei'];

  if (lang_val == 'english') {
    arr = english_nums;
  } else if (lang_val == 'german') {
    arr = german_nums;
  }
  var options_html = '';
  for (var i = 0; i < arr.length; i++) {
    options_html = options_html + '<option value=' + arr[i] + '>' + arr[i] + '</option>';
  }
  document.getElementById('numbers_select').innerHTML = options_html;
}

【讨论】：

这行得通，但我的完美无瑕，效率最高:)
将html Element 和innerHTML 声明为将来并不是一个好习惯，这些元素实际上并未在DOM 视图中初始化，它们会出现在屏幕上但不会DOM 可见，正确的方法是 createElement 然后 appendChild。

【解决方案3】：

<script type="text/javascript">
    $(document).ready(function(){
     var english  = ["one", "two", "three"];
     var german  = ["eins", "zwei", "drei "];

        $('#language').on('change', function() {
            var options = "";
            var type = this.value ; 
          //alert( this.value ); // or $(this).val()
          if(type=="english"){
               english.forEach(function(entry) {
            options = options + "<option>"+entry+"</option>";
        });
          }else if(type=="german"){
             german.forEach(function(entry) {
            options = options + "<option>"+entry+"</option>";
        });
          }else{
            options="";
          }
        $("#sub_language").html(options);
        });
});

</script>

<select id="language">
   <option value="0" selected>select</option>
    <option value="english">english</option>
    <option value="german">german</option>
</select>
<select id="sub_language">

</select>

【讨论】：

是纯 Javascript 吗？
是的，我在那里看到了 lil jQuery。

【解决方案4】：

<div id="box"></div> 放置了两个select 标签。

然后，其他标签将通过 JavaScript 创建

var lang = ["english", "german"];
var second = [
    ["one", "two", "second"],
    ["eins", "zwei", "drei "]
];

addOptions(lang, "first");
addOptions(second[0], "second");

function addOptions(arr, selectId) {
    var s = document.getElementById(selectId);
    if (!s) {
        s = document.createElement("select");
        var myDiv = document.getElementById("box");
        myDiv.appendChild(s);

        s.id = selectId;
    }
    s.options.length = 0;

    for (var i = 0; i < arr.length; i++) {
        var option = document.createElement('option');
        option.text = arr[i];
        option.value = arr[i];
        s.options[s.options.length] = option;
    }
}


document.getElementById("first").onchange = function () {
    console.log(this.selectedIndex)
    addOptions(second[this.selectedIndex], "second");
};

&lt;div id="box"&gt;&lt;/div&gt;

【讨论】：

这行得通，但我的完美无瑕，效率最高:)
:) 好的，乔丹（+1）。此外，我的答案没有 html 代码（完全纯 JS）。祝你好运
不客气。 :) 这是为了努力。我不认为它更有效率。 :)
哈哈 :) 不，我 100% 肯定我的采矿效率更高，不是很多，但它是......我是强迫症，服用 adderall 并沉迷于寻找最有效的方法：D
哈哈，我在初始化时静态声明 HTML 给了我一个优势，还有我的变量声明计数和你拥有的空格 :) 但老实说，就像我说的那样，差别不大...您在很大程度上和我一样使用 DOM，但是当您像我一样使用 C 或汇编代码进行开发时，您会更多地处理内存管理并担心这些事情。

【解决方案5】：

到目前为止，所有发帖者都（积极地）忽略了问题确实是关于如何处理 PDF 中的问题，这意味着在 Acrobat JavaScript 中。因此，任何使用 HTML 的代码示例都可能显示一些点，但无法使用。

以下函数根据参数加载语言字符串，并保持当前选择（假设默认为英语）：

function langChang(lang)
{
// saving the current selections of fields ddl3 and ddl4
var select3 = this.getField("Anrede").currentValueIndices ;
var select4 = this.getField("Andere Gründe").currentValueIndices ;

// clearing the comboboxes
this.getField("Anrede").clearItems() ;
this.getField("Andere Gründe").clearItems() ;

switch(lang) {
case "en":
// Loading the English language strings
this.getField("Anrede").setItems(english_opt1) ;
this.getField("Andere Gründe").setItems(english_opt2) ;
break ;
case "de":
// Loading the German language strings
this.getField("Anrede").setItems(german_opt1) ;
this.getField("Andere Gründe").setItems(german_opt2) ;
break ;
default:
// We assumed that the English language strings are the default
this.getField("Anrede").setItems(english_opt1) ;
this.getField("Andere Gründe").setItems(english_opt2) ;
}

// restoring the selections
this.getField("Anrede").currentValueIndices = select3 ;
this.getField("Andere Gründe").currentValueIndices = select4 ;

}

然后，您将使用 DeutschL 或 EnglishL 字段中 Keystroke 事件中的适当参数运行该函数。在这两个字段中，您将设置“立即提交所选值”选项（在“字段属性”对话框的“选项”选项卡中）。

注意：您可以尝试不清除组合框；在这种情况下，也可能没有必要保存当前选择。这将使函数更小。但目前的功能更可靠。

注意 2：这是可行的，因为字符串数组具有与语言等效的元素。

【讨论】：

“主动”忽略... Lmao他改变了问题，如果你甚至看过修订版你就会知道