selectタグ内のすべてのoptionタグのvalue値が取得出来ない。

Question

前提・実現したいこと

javascriptでselectタグの中のoptionのそれぞれのvalue値を取得しようとしているのですが、取得できません。
inputタグでoninputで関数を呼び出して、入力の度にチェックを行い、
selectタグの中で同じvalue値があればselectedにしたいです。

発生している問題・エラーメッセージ

TypeError: document.forms.editfrm.innm.options[i] is undefined

該当のソースコード

function inputSet() {
   var selCount = document.forms.editfrm.innm.length;
   console.log(selCount);
   var inputValue = document.forms.editfrm.nsno.value;
   console.log(inputValue);
   for (i = 1; i <= selCount; i++) {
      var optionValue = document.forms.editfrm.innm.options[i].value;
      if (inputValue == optionValue) {
         document.forms.editfrm.innm.selectedIndex = i;
      } else {
         document.forms.editfrm.innm.selectedIndex = 0;
      }
   }
}

試したこと

html側のoninputに指定している関数名とnameはjs側と同じになっていることは確認しました。

Comments

[yasutomi]

HTMLの記載がないと回答できないため
追記をお願いします。

[m.ts10806]

console.log()の結果もご提示ください。

Answer 1

for (i = 1; i <= selCount; i++) {

この部分を以下のように修正しても同じでしょうか。

for (i = 0; i < selCount; i++) {

Answer 2

yambejp さんの回答のように、通常は value の設定だけでいいのですが、もしかしたら IE を使っているのでしょうか？

  // 何度も書くのはだるいので。
  var select = document.forms.editfrm.innm;

  var selected = false;
  for (var i = 0; i < selCount; i++) {
    var option = select.options[i];
    if (inputValue == option.value) {
      option.selected = true;
      selected = true;
      break;
    }
  }

  if (!selected) {
    select.selectedIndex = 0;
  }

Answer 3

コードをもとにざっくりHTML組んでみたんですけどChromeで確認したところ提示のエラーにはなりませんでした。

<form name="editfrm">
    <select name="innm" onchange="inputSet()">
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <select name="nsno">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</form>

出たエラー：Uncaught TypeError: Cannot read property 'value' of undefined

FireFoxでは同様のエラーが出たとのコメントもいただいたので、ブラウザもご提示いただいた方が良いですね。

またdocument.forms.editfrm.innm.options[i]をconsole.log()してみることも大事ですし、
配列など番号は0から始まっているということを意識してコードを組んでみると良いです。

Comments

[miyabi_pudding]

横槍失礼します。
FireFoxだと、質問者さんと同じエラーでました！
ブラウザも記載してもらった方がいいかも・・・。

[m.ts10806]

おお、なるほど・・
ちょっと書き方かえます。

[m.ts10806]

ブラウザによってチェックする優先順位などが違うんでしょうね。
ちょっと厄介・・

Answer 4

innmで選択した値をnsnoに反映したいということでしょうか？
であればforで回すこともないと思いますが・・・・

<script>
HTMLElement.prototype.trigger=function(eStr){
  var e = document.createEvent("HTMLEvents");
  e.initEvent(eStr, true, true );
  this.dispatchEvent(e);
}
window.addEventListener('DOMContentLoaded', function(e){
  var innm=document.querySelector('form[name=editfrm] [name=innm]');
  var nsno=document.querySelector('form[name=editfrm] [name=nsno]');
  innm.addEventListener('change',function(e){
    nsno.value=innm.value;
  });
  innm.trigger("change");
});
</script>

<form name="editfrm">
    <select name="innm">
        <option value="b">b</option>
        <option value="c">c</option>
    </select>
    <select name="nsno">
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="c">c</option>
    </select>
</form>

Comments

[yambejp]

formにnameをつけてアクセスするとかちょっと考え方が古い？
参考にしてるテキストが古いのかも