Question

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

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

但我不知道如何获取数组值并使用Code填充两个字段，使用Name填充另一个字段。

在线：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

但没有运气。

感谢您的帮助。

Answer 1

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

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);

Answer 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事件。其他浏览器将等待实际选择使用制表符或空格的选项（取决于浏览器）。

Answer 3

是的，我采取类似于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=。

Answer 4

使用此代码。

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

希望对你有所帮助。

Answer 5

试试这个

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

从选项中选择数组值，使用javascript填充文本字段

5 个答案: