将JavaScript变量传递给html <select>属性

我想将JavaScript中的变量传递给select标签的value属性。这里是我的代码：将JavaScript变量传递给html <select>属性

<script> 

if (window.location.href.substring(0, 9) === "http://ww") { 
    var home_var = "bing.com"; 
    var home_var = "poem.com"; 
} else if (window.location.href.substring(0, 9) === "https://p") { 
    var home_var = "https://px.multiscreensite.com/index.php?url=bing.com"; 
    var poem_var = "https://px.multiscreensite.com/index.php?url=poem.com"; 
} else { 
    var home_var = "1"; 
    var_poem_var = "2"; 
} 
console.log(home_var); 

</script> 

<select OnChange="window.location.href=this.value"> 
    <option>Tagged Stuff and Navigation</option> 
    <option value=HOME_VAR>Home Page</option> 
</select>

来源

2016-06-20 Aaron Quitta

那么，有什么问题？ – Timo

JavaScript变量不能直接在HTML中使用，你可能想要的是一个适当的事件处理程序。 – adeneo

@TimoSta当选择“主页”选项而不是去bing.com或https://px.multiscreensite.com/index.php?url=bing.com是去bing.com/home_var或https：/ /px.multiscreensite.com/home_var。 –

如果添加了SELECT后在JavaScript就可以实现这一点：

<select id="mySelect" OnChange="window.location.href=this.value"> 
    <option>Tagged Stuff and Navigation</option> 
</select> 

<script> 
    if (window.location.href.substring(0,9) === "http://ww") { 
    var home_var = "bing.com";  
    } 
    else if (window.location.href.substring(0,9) === "https://p") { 
    var home_var = "https://px.multiscreensite.com/index.php?url=bing.com"; 
    } 
    else { 
    var home_var = "1"; 
    } 
    var select= document.getElementById("mySelect"); 
    var option = document.createElement("option"); 
    option.text = "Hope Page"; 
    option.value = home_var; 
    select.add(option); 
    console.log(home_var); 
</script>

JS提琴https://jsfiddle.net/emfvyhq2/

来源

2016-06-20 23:05:52 earl3s

这似乎对我有效，但在给出明确的答案之前，我将亲自操心一点，谢谢！ –

没问题。在这种情况下，您需要确保JavaScript在DOM加载后运行。 – earl3s

对不起，这可能听起来很愚蠢，但是，什么是DOM，它是如何应用的？ –

您可以添加动态元素...

<script> 
(function() { 
    var s = document.getElementById("selector"); 
    var o = document.createElement("option"); 
    o.innerHTML = "Home Page"; 
    o.value = home_var; 
    s.appendChild(o); 
})(); 
</script> 

<select id="selector" OnChange="window.location.href=this.value">  
    <option>Tagged Stuff and Navigation</option> 
</select>

来源

2016-06-20 23:04:20 kirinthos

对不起，我上面没有更清楚。这将工作，但我试图在更大规模上做到这一点让我编辑我的问题。 –

它会缩放，使一个正确的功能，并传递给函数的文本和值参数来创建选项元素 – kirinthos

对不起，我不是很擅长这个，你可以为我做吗？抱歉。 –

您是否在搜索类似

function changeLink(val) { 
    if(val === 'HOME_VAR'){ 
    ... your code logic ... 
    } 
} 

<select onchange="javascript:changeLink(this.value)"> 
     <option>Tagged Stuff and Navigation</option> 
     <option value="HOME_VAR">Home Page</option> 
</select>

来源

2016-06-20 23:06:14

我不明白'changeLink'的含义，或者它是如何被用来准确地工作的。 –

这里changeLink是一个javascript函数绑定到onchange事件。因此，每次更改选择时都会执行此功能。当我们将this.value传递给此函数时，您还可以访问所选选项的值。现在，如果选定的选项与HOME_VAR匹配，您可以执行您的逻辑。虽然我不确定这里的要求。 –

你是什么意思“这里的要求”？ –

将JavaScript变量传递给html <select>属性

回答

相关问题