要素の配列 キー取得

Question

<form method="post">
<input type="text" name="fs[]" id="fs" autocomplete=on list="fruits">
//ただし、このタグは複数（いくつ存在するかは動的に変わる）
<input type="submit" value="送信">
</form>

<datalist id="fruits"> <option value="みかん"> <option value="リンゴ"> <option value="ばなな"> <option value="いちご"> </datalist>

このdatalistのもとになるデータは
array( 1=>"みかん",
2=>"リンゴ",
3=>"ばなな",
4=>"いちご")
とします。

やりたいことは、送信ボタンをクリックしたときに、inputタグの値およびdatalistのもとになる配列キー（1,2,3,4 のいずれか）を取得したい。

いずれかのinputタグで、たとえば、'みかん' を選択したとき、配列キーの1
を取得する、ということをしたいです。

予想結果

<input type="text" name="fs[]" id="fs" autocomplete=on list="fruits">
// リンゴ を選択
<input type="hidden" name="fs_key[]" id="fs" value="2">
// 選択後 key 2 がセットされる
<input type="text" name="fs[]" id="fs" autocomplete=on list="fruits">
// みかん を選択
<input type="hidden" name="fs_key[]" id="fs" value="1">
// 選択後 key 1 がセットされる

Comments

[kei344]

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[m.ts10806]

javascriptのタグがついていますが、何か試されたり、調べたことはありますか？「やってみたこと」「試してみたこと」追記をお願いします。

Answer 1

datalist自体に1,2,3,4に当たるものが埋め込まれていないので
そのデータを抜き出すことは難しいと思います。
逆にもとになるデータがあるのですから、それを表示するだけではないでしょうか？

Comments

[sea1kiki1]

ありがとうございます

Answer 2

どういうデータがほしいのかわかりませんが、それぞれ配列にするとこんな感じでしょうか

  var fss = Array.from(document.getElementsByName('fs[]'));
  var options = Array.from(document.getElementById('fruits').options);
  var sourceValues = fss.map(a => a.value);
  var convValues = fss.map(a => {
    var index = options.findIndex(b => b.value === a.value);
    return index < 0 ? a.value : (index + 1).toString();
  });

  console.log(sourceValues); // ["みかん", "リンゴ"]
  console.log(convValues); // ["1", "2"]

Comments

[sea1kiki1]

ありがとうございます。