Question

这是我的代码。

<script type="text/javascript">
    function showDiv(divID,val) {
        var text= val.value;
        alert(text);
    }
</script>

Mouse:<select onChange="showDiv('#mouse',this);">
    <option value="">Select Mouse Type</option>
    <option value="{'text':'Normal','id':'normalMouse'}">Normal</option>
    <option value="{'text':'Gaming','id':'gamingMouse'}">Gaming</option>
</select>

输出结果为：

{＆＃39;文本＆＃39;：＆＃39;正常＆＃39;＆＃39; ID＆＃39;：＆＃39; normalMouse＆＃39;}

但输出应该是正常的＆＃39;只要。这意味着我想分别访问这些值。怎么做？

Answer 1

根据w3c org option doc的值只能有字符串值，所以有必要将其转换为对象..

<强> Working fiddle
Javascript代码

function showDiv(divID, val) {
    var value = eval('(' + val.value + ')');
    alert('Text: "' + value['text'] + '" Id: "' + value['id'] + '"');
}

正如@Johan所说，使用eval()并不是一种安全的方法..所以对于甚至担心安全的情况 Working Fiddle using JSON.parse

HTML

<option value='{"text":"Normal","id":"normalMouse"}'>Normal</option>
<option value='{"text":"Gaming","id":"gamingMouse"}'>Gaming</option>

<强> 的Javascript

function showDiv(divID, val) {
    var value = JSON.parse(val.value);
    alert('Text: "' + value['text'] + '" Id: "' + value['id'] + '"');
}

希望它有所帮助.. !!

Answer 2

由于您要以字符串格式保存对象，请先解析它：

var o = JSON.parse(val.value);
console.log(o.text, o.id);

虽然单引号对JSON密钥和属性都不起作用，但我建议您使用有效的html5 data属性存储额外数据，例如

<option value="something" data-text="Normal" data-id="normalMouse">
    Normal
</option>

使用

访问它

var text = val.getAttribute('data-text'); // etc...

Answer 3

将'转换为"，然后将其解析为Json格式

<script type="text/javascript">
function showDiv(divID, val) {
    var text        = val.value,
        // convert ' to "
        jsonStrText = text.replace(/'/g, '"'),
        // parse to json
        jsonText    = JSON.parse(jsonStrText);

    alert(jsonText.text);
}
</script>

或者您可以将html修改为

<option value="{\"text\":\"Normal\",\"id\":\"normalMouse\"}">Normal</option>

直接解析为Json格式

<script type="text/javascript">
function showDiv(divID, val) {
    var text        = val.value,
        // directly parse to json
        jsonText    = JSON.parse(text);

    alert(jsonText.text);
}
</script>

使用javascript访问具有多个值的select选项标记中的值

3 个答案: