2

我有一个表单，用户可以使用 ajax 进行“即时搜索”，搜索结果显示为“选择...选项”标签，当用户选择一个选项时，它的值将填充一个文本字段。代码的“简化”版本是这样的：

<form action="action.php" method="post" name="form1" id="form1">
    Code: <input type="text" name="Code" value="" size="32" readonly="readonly" /> <br />
    <select class="paselect" onchange="form1.elements['Code'].value = this.options[this.selectedIndex].value;">
        <option value="2413">2413 - Name A</option>
        <option value="2414">2414 - Name B</option>
        <option value="2415">2415 - Name C</option>
    </select>
</form>

您也可以在线查看：http: //jsfiddle.net/BCXfQ/

现在，我需要为每个选项选择获取两个值，如下所示：

<form action="action.php" method="post" name="form1" id="form1">
    Code: <input type="text" name="Code" value="" size="32" readonly="readonly" /> <br />
    Name: <input type="text" name="Name" value="" size="32" readonly="readonly" /> <br />
    <select class="paselect" onchange="form1.elements['Code'].value = this.options[this.selectedIndex].value;">
        <option value="['Name A', '2413']">2413 - Name A</option>
        <option value="['Name B', '2414']">2414 - Name B</option>
        <option value="['Name C', '2415']">2415 - Name C</option>
    </select>
</form>

但我不知道如何获取数组值并用代码填充两个字段，另一个用名称填充。

在线：http: //jsfiddle.net/zm3nX/

我从现在开始尝试改变

form1.elements['Code'].value = this.options[this.selectedIndex].value

到

form1.elements['Code'].value = this.options[this.selectedIndex].value[0]

并

form1.elements['Code'].value = this.options[this.selectedIndex[0]].value

但没有运气。

谢谢你的帮助。

4

5 回答 5

6

您是否考虑过使用数据属性？

Code: <input type="text" id="foo-code" name="Code" value="" size="32" readonly="readonly" /> <br />
Name: <input type="text" id="foo-name" name="Name" value="" size="32" readonly="readonly" /> <br />
<select class="paselect" id="foo-list">
  <option data-name="Name A" data-code="2413">2413 - Name A</option>
  <option data-name="Name B" data-code="2413">2413 - Name B</option>
  <option data-name="Name C" data-code="2413">2413 - Name C</option>
</select>

把东西粘在一起：

var select = document.getElementById("foo-list");
var code = document.getElementById("foo-code");
var name = document.getElementById("foo-name");
select.addEventListener('change', function(event) {
  code.value = this.getAttribute("data-code");
  name.value = this.getAttribute("data-name");
}, false);
于 2013-04-02T09:12:15.850 回答
2

您可以执行以下操作：

<script>
function updateValues(el) {
  var form = el.form;
  var v = el.value;
  v = v.replace(/^\[\'|\'\]$/g,'').split("', '");
  form.Code.value = v[1];
  form.Name.value = v[0];
}
</script>

<form action="action.php" method="post" name="form1" id="form1">
  Code: <input type="text" name="Code" size="32" readonly> <br>
  Name: <input type="text" name="Name" size="32" readonly> <br>
  <select class="paselect" onchange="updateValues(this);">
    <option value="['Name A', '2413']">2413 - Name A
    <option value="['Name B', '2413']">2413 - Name B
    <option value="['Name C', '2413']">2413 - Name C
  </select>
</form>

请注意，在 IE 中，如果用户使用光标键导航选项，则每次他们将焦点移动到不同的选项时都会调度 onchange 事件。其他浏览器将等待实际选择选项卡或空格（取决于浏览器）。

于 2013-04-02T09:24:17.710 回答
2

是的，我会采取类似于 Angular 这样做的方法 - 使用 jquery 和 rodneyrehm 的示例：

<select class="paselect" id="foo-list">
  <option data-name="Name A" data-code="2413">2413 - Name A</option>
  <option data-name="Name B" data-code="2413">2413 - Name B</option>
  <option data-name="Name C" data-code="2413">2413 - Name C</option>
</select>

$('#foo-list').change(function() {
    var opt = $(this.options[this.selectedIndex]);
    var name = opt.attr('data-name');
    var code = opt.attr('data-code');

    $('#status').text('Name: ' + name + ', Code: ' + code);
});

http://jsfiddle.net/b9chris/mbSLB/

这避免了潜在的脆弱正则表达式；您存储的字符串以及在考虑和错误检查变得更简单时要转义的内容。

前缀只是为了data-符合 HTML5 规范，但事实是您可以组成您喜欢的任何属性名称 - 因此，如果您在服务器上生成此 HTML 并希望保持简短，您甚至可以使用a=和b=.

于 2013-04-02T11:59:58.907 回答
1

使用此代码。

<script>
    function setdata(selectvalue, selecttext){  
        form1.elements['Code'].value = selectvalue;
        form1.elements['Name'].value = selecttext;
    }
</script>

<form action="action.php" method="post" name="form1" id="form1">
    Code: <input type="text" name="Code" value="" size="32" readonly="readonly" /> <br />
    Name: <input type="text" name="Name" value="" size="32" readonly="readonly" /> <br />
    <select class="paselect" onchange="setdata(this.value,this.options[this.selectedIndex].text)">
         <option value="['Name A', '2413']">2413 - Name A</option>
         <option value="['Name B', '2414']">2414 - Name B</option>
         <option value="['Name C', '2415']">2415 - Name C</option>
    </select>
</form>

希望对您有所帮助。

于 2013-04-02T09:40:00.160 回答
1

试试这个

<form action="action.php" method="post" name="form1" id="form1">
    Code: <input type="text" name="Code" value="" size="32" readonly="readonly" /> <br />
    Name: <input type="text" name="Name" value="" size="32" readonly="readonly" /> <br />
    <select class="paselect" onchange="getValue(this.value);">
        <option value="Name A-2413">2413 - Name A</option>
        <option value="Name B-2413">2413 - Name B</option>
        <option value="Name C-2413">2413 - Name C</option>
    </select>
</form>

<script>
    function getValue(val){ 
        var myval=val.split('-');
        form1.elements['Code'].value=myval[1];
        form1.elements['Name'].value=myval[0];
    }
</script>
于 2013-04-02T09:57:40.793 回答