无法获取 <select> 值以形成字段

Question

我有这个页面，其中有一个带有选项下拉列表的表单，然后是一个对话框，您可以在其中更改所选选项的详细信息。从下拉列表（select 标记）中选择一个选项后，我无法更新对话框表单（无默认值）。

代码可能看起来有点奇怪，它是由 parenscript 和 cl-who（Common Lisp 库）自动生成的。

代码如下：

function openFuns(form) {
    var frm = getElementById('editPass');
    return frm.date.value = form.passList.options[form.passList.selectedIndex].value;
};
function init() {
    _js72 = document.getElementById('editPassDialog');
    document.getElementById('getPass').onclick = function () {
        return _js72.showModal();
    };
    return document.getElementById('submitPass').onclick = function () {
        return _js72.close();
    };
};
window.onload = init;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1' />
    <title>Ashtanga Yoga Osaka | Student Page
    </title>
    <link type='text/css' rel='stylesheet' href='/style.css' />
    <script type='text/javascript'>
    </script>
  </head>
  <body>
    <div id='header'></div>
    <div id='container'>
      <form action='/edit-student' method='post' id='editStudent'>
        <p>Name
          <input type='text' name='name' class='txt' value='kaori kawai' />
        </p>
        <p>Email
          <input type='email' name='email' class='txt' value='test2@gmail.com' />
        </p>
        <p>Passes
          <select name='passList'>
<option id='pass' value='(TYPE M DATE 2015-01-05T20:33:05.000000+09:00 AMT
                          17000)'>Jan 2015
</option>
<option id='pass' value='(TYPE W DATE 2014-12-29T20:00:38.000000+09:00 AMT 6000)'>Dec 2014
</option>
          </select>
          <button type='button' id='getPass' onclick='openFuns(this.form);' class='btn'>Get Pass
          </button>
        </p>
        <p>
          <input type='submit' value='Edit Info' class='btn' />
        </p>
      </form>
      <dialog id='editPassDialog'>
        <h1>Edit Pass
        </h1>
        <form action='edit-pass' method='post' id='editPass'>
          <p>Date bought
            <input type='text' name='date' class='txt' />
          </p>
          <p>Type
            <inut type='text' name='type' class='txt'></inut>
          </p>
          <p>Amount Paid
            <input type='text' name='amt' />
          </p>
          <p>
            <input type='submit' value='Edit Pass' class='btn' id='submitPass' />
          </p>
        </form>
      </dialog>
    </div>
  </body>
</html>

因此，理想的行为是它会使用下拉列表 "Passes" 中的任何选定选项来更新对话框中的日期字段，但这并没有发生。我知道表单数据已正确传递给函数 openFuns()，因为如果我使用 console.log 或 alert，它会显示所选选项的信息。

Answer 1

所以，这是 jsfiddle：

http://jsfiddle.net/e80gf0rq/1/

<body>
    <div id='header'></div>
    <div id='container'>
      <form action='/edit-student' method='post' id='editStudent'>
        <p>Name
          <input type='text' name='name' class='txt' value='kaori kawai' />
        </p>
        <p>Email
          <input type='email' name='email' class='txt' value='test2@gmail.com' />
        </p>
        <p>Passes
          <select name='passList'>
<option id='pass' value='(TYPE M DATE 2015-01-05T20:33:05.000000+09:00 AMT
                          17000)'>Jan 2015
</option>
<option id='pass' value='(TYPE W DATE 2014-12-29T20:00:38.000000+09:00 AMT 6000)'>Dec 2014
</option>
          </select>
          <button type='button' id='getPass' class='btn'>Get Pass
          </button>
        </p>
        <p>
          <input type='submit' value='Edit Info' class='btn' />
        </p>
      </form>
      <dialog id='editPassDialog'>
        <h1>Edit Pass
        </h1>
        <form action='edit-pass' method='post' id='editPass'>
          <p>Date bought
            <input type='text' name='date' class='txt' />
          </p>
          <p>Type
            <input type='text' name='type' class='txt'></input>
          </p>
          <p>Amount Paid
            <input type='text' name='amt' />
          </p>
          <p>
            <input type='submit' value='Edit Pass' class='btn' id='submitPass' />
          </p>
        </form>
      </dialog>
    </div>
  </body>

JS:

_js72 = document.getElementById('editPassDialog');
    document.getElementById('getPass').onclick = function () {
        var frm = document.getElementById('editPass');
        var form = document.forms.namedItem("editStudent");
        frm.date.value = form.passList.options[form.passList.selectedIndex].value;
        return _js72.showModal();
    };
    document.getElementById('submitPass').onclick = function () {
        return _js72.close();
    };

日期被传递到字段。（传递选项的值）要传递选项的 html 使用 innerHtml 属性，就像我在这里所做的那样：

http://jsfiddle.net/e80gf0rq/2/

此外，我建议您为此至少使用 jquery/bootstrap。例如 dialog 元素仅在 chrome 和 opera 中受支持：http://caniuse.com/#search=dialog

无法获取 <select> 值以形成字段

Having trouble getting <select> value to form field

html

javascript

html-select