Question

我对JavaScript很新，我无法弄清楚如何在JavaScript / html中编写代码：我基本上需要一个选项，以便客户可以选择他想要的语言，并根据该选择出现另一个选择列表，他可以选择该语言的可用促销/项目。

<script>
function PromoLanguage(){
var language = document.getElementById('languages');
var a = language.selectedIndex;
if (a == 1){
document.getElementById('French').style.display = inline;
}
else if (a == 2){
document.getElementById('English').style.display = inline;
}
else if (a == 3){
document.getElementById('German').style.display = inline;
}
}    
</script>    
<body>
<select onchange="PromoLanguage()" id='languages'>
<option>French</option>
<option>English</option>
<option>German</option>
</select>

<select id='English' style='display: none'>
<option>ENGLISHPROMO1</option>
<option>ENGLISHPROMO2</option>
<option>...</option>

<select id='French' style='display: none'>
<option>FRENCHPROMO1</option>
<option>FRENCHPROMO2</option>
<option>...</option>

<select id='German' style='display: none'>
<option>GERMANPROMO1</option>
<option>GERMANPROMO2</option>
<option>...</option>

这是我尝试过的另一件事，如果我选择第二项（英语），它可以工作，现在我不知道当客户选择法语或德语时如何让它做类似的事情。

document.getElementById('languages').onchange = function() {
var display = this.selectedIndex == 2 ? "Inline" : "none";
document.getElementById('English').style.display = display;
}

Answer 1

使用类似的东西来获取所选的选项

 $('select').on('change', function() {
    var show = $('select option:selected').val();
     if(show ==something){
    //  do something
      }
});

如果这是你要求的

for javascript：

         <select  id="select_id">
        <option value="0">French</option>
        <option value="1">English</option>
        </select>
       <select  id="promo" class="hidden">
        <option value="0">promo1</option>
        <option value="1">promo2</option>
        </select>
      document.getElementById('promo').style.display = 'none';

   var select_id = document.getElementById("select_id");
   var selected =select_id.options[select_id.selectedIndex].text;
     if(selected ==French){
    document.getElementById('promo').style.display = 'block';
      }

你可以做同样的东西选择促销

Answer 2

请注意，我已更改HTML（关闭<select>元素，并将类名添加到与'language-options'相关的元素中：

<select id='languages'>
  <option>French</option>
  <option>English</option>
  <option>German</option>
</select>

<select id='English' class='languageOption'>
  <option>ENGLISHPROMO1</option>
  <option>ENGLISHPROMO2</option>
  <option>...</option>
</select>

<!-- other select elements removed for brevity -->

我也完全改变了你的功能，使其功能稍微干净一点（虽然在后面的回答中我将解释原始实现的问题，除了缺乏修复你的iPad坚持语法的努力）。

这是一个似乎有效的简单功能：

function PromoLanguage() {
  // I've changed the variable-names, to something meaningful,
  // which makes them easier to keep track of within the function:
  var select = document.getElementById('languages'),
    index = select.selectedIndex,
    // you don't need the <option>, you need the <option>-value,
    // if no value is set the value is the option's text:
    language = select.options[index].value;

  // using Array.prototype.forEach, and Function.prototype.call
  // to iterate over the array-like NodeList returned by 
  // document.querySelectorAll() (which is supported in IE8,
  // whereas getElementsByClassName() is not);
  Array.prototype.forEach.call(document.querySelectorAll('.languageOption'), function (opt) {
    // the first element of the anonymous function is the array-element
    // itself, in this case a DOM-node, the <select> elements found by
    // their class-name.
    // here we're setting their display property to an invalid value,
    // which removes the display property from their style attribute,
    // and allows the CSS to style them once more:
    opt.style.display = '';
  });

  // Finding the <select> element with the appropriate id,
  // and showing it:
  document.getElementById(language).style.display = 'block';
}

// in-line JavaScript is obtrusive, this binds the change
// event-handler to the element with an id='languages',
// and binds the named-function (note the lack of parentheses)
// as the event-handler:
document.getElementById('languages').addEventListener('change', PromoLanguage);

function PromoLanguage() {
  var select = document.getElementById('languages'),
    index = select.selectedIndex,
    language = select.options[index].value;
  Array.prototype.forEach.call(document.querySelectorAll('.languageOption'), function (opt) {
    opt.style.display = '';
  });
  document.getElementById(language).style.display = 'block';
}

document.getElementById('languages').addEventListener('change', PromoLanguage);

select {
  display: block;
}
select.languageOption {
  display: none;
}

<select id='languages'>
  <option>French</option>
  <option>English</option>
  <option>German</option>
</select>

<select id='English' class='languageOption'>
  <option>ENGLISHPROMO1</option>
  <option>ENGLISHPROMO2</option>
  <option>...</option>
</select>

<select id='French' class='languageOption'>
  <option>FRENCHPROMO1</option>
  <option>FRENCHPROMO2</option>
  <option>...</option>
</select>

<select id='German' class='languageOption'>
  <option>GERMANPROMO1</option>
  <option>GERMANPROMO2</option>
  <option>...</option>
</select>

您的原始代码：

Function PromoLanguage() {
  Var language = document.getElementById('languages');
  Var a = language.selectedIndex;
  If(a == 1) {
    Document.getElementById('French').style.display = display;
  }
  Else
  if (a == 2) {
    Document.getElementById('English').style.display = display;
  }
  Else
  if (a == 3) {
    Document.getElementById('German').style.display = display;
  }
}

JavaScript区分大小写，Var应为var，If应为if;在iPad上打字，而不是注意创建的错误是understandable，但是发布破损的代码并不会有额外的中断，因为这会掩盖你自己的错误。

现在：

var a = language.selectedIndex;
if(a == 1) {

在这里，你错过了第一个选项，这将是 - 感谢JavaScript中的零索引 - a == 0。

此外，selectedIndex将始终是一个数字，因此您应该使用===来确保您正在测试完全相等（数字是相同的，并且两个参数都是数字）

然后：

document.getElementById('French').style.display = display;

在这里，您要为元素的display属性分配变量;你还没有定义那个属性，那么除了引发错误之外它什么都不做（人们希望）。如果您在带有错误控制台的浏览器中键入此内容（虽然据称iPad Safari 有一个，我从未想过如何访问它），您可以检查它报告的错误，会 - 希望 - 引导你解决问题（你的代码没有事先被不正确的大写所阻碍）。

JavaScript var getElementById if语句不起作用

2 个答案: