Question

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

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

代码如下：

＆＃13;

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;

＆＃13;

<!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>

＆＃13;

所以理想的行为是，它会更新对话框中的日期字段，其中包含所选选项的任何内容，从下拉列表＆＃34; Passes＆＃34;，但这没有发生。我知道表单数据已正确传递给函数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。例如，对话框元素仅在chrome和opera中受支持：http://caniuse.com/#search=dialog

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

1 个答案: