Question

我有以下代码，在选择项目时，会在选择框下方添加一些文字。但是我只能让它显示选择框的值。有什么方法可以让它显示第3个值吗？

<script type="text/javascript">
function dropdownTip(value){
    console.log(value);
        document.getElementById("result").innerHTML = value;
    }</script>

<select onChange="dropdownTip(this.value)" name="search_type" style="margin-right:10px;         margin-top:2px;">
    <option selected="selected" value="1">Client 1</option>    
    <option value="2">Client 2</option>
    <option value="3">Client 3</option>
    <option value="4">Client 4</option>
</select>

<div id="result"></div>

例如，我想在客户端上添加类似“永远记得要求全名”的内容，并在客户端2上添加“永不要求姓”。

Answer 1

这应该有效：

<script type="text/javascript">
function dropdownTip(value){
    var preamble = 'default preamble';
    if(value == 'Client 2') {
       preamble = 'Never ask for last name on ';
    } 
    if (value == 'Client one') {
       preamble =  'Always remember to ask for the full name';
     }
    console.log(value);
        document.getElementById("result").innerHTML = preamble + value;
    }</script>

<select onChange="dropdownTip(this.value)" name="search_type" style="margin-right:10px;         margin-top:2px;">
    <option selected="selected" value="1">Client 1</option>    
    <option value="2">Client 2</option>
    <option value="3">Client 3</option>
    <option value="4">Client 4</option>
</select>

<div id="result"></div>

Answer 2

您可以使用html5 data-*属性。

Working demo

的javascript：

window.dropdownTip = function (obj) {

    console.log(obj);
    console.log(obj.value);

    var sel = obj.options[obj.selectedIndex];
    console.log(sel.getAttribute('data-desc'));

    document.getElementById("result").innerHTML = obj.value;
    document.getElementById("result").innerHTML += sel.getAttribute('data-desc');
}

HTML：

<body>
    <select onchange="dropdownTip(this);" name="search_type" id="selector">
        <option selected="selected" value="1" data-desc="test 1">Client 1</option>
        <option value="2" data-desc="test 2">Client 2</option>
        <option value="3" data-desc="test 3">Client 3</option>
        <option value="4" data-desc="test 4">Client 4</option>
    </select>
    <div id="result"></div>
</body>

使用Javascript显示选项提示

2 个答案: