Javascript 使用<；选项>；标签

我正在尝试制作一个网站，在这里你可以使用javascript在不同的设计之间进行选择。我曾经当过导游。但是，在指南中，它使用输入标记在不同的样式表之间切换，这使得您需要为每个设计使用一个按钮。由于设计上有多种选择，所以我很不方便为每种设计都设置一个按钮。我希望它是一个列表，您可以从该列表中选择希望使用的设计，然后单击“提交”按钮选择该设计。下面提供了我使用的代码，但我需要帮助才能使其正常工作

HTML

违约
蓝色
粉红色

这适用于按钮版本：

<input type="submit" onclick="switch_style('default');return false;" name="theme" value="Default" id="default">

<input type="submit" onclick="switch_style('blue');return false;" name="theme" value="Blue" id="blue">

<input type="submit" onclick="switch_style('pink');return false;" name="theme" value="Pink" id="pink">

</form>

Javascript:

var style_cookie_name = "style" ;
var style_cookie_duration = 30 ;
var style_domain = "#" ;

// You do not need to customise anything below this line

function switch_style ( css_title )
{
// You may use this script on your site free of charge provided
// you do not remove this notice or the URL below. Script from
// http://www.thesitewizard.com/javascripts/change-style-sheets.shtml
  var i, link_tag ;
  for (i = 0, link_tag = document.getElementsByTagName("link") ;
    i < link_tag.length ; i++ ) {
    if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) &&
      link_tag[i].title) {
      link_tag[i].disabled = true ;
      if (link_tag[i].title == css_title) {
        link_tag[i].disabled = false ;
      }
    }
    set_cookie( style_cookie_name, css_title,
      style_cookie_duration, style_domain );
  }
}
function set_style_from_cookie()
{
  var css_title = get_cookie( style_cookie_name );
  if (css_title.length) {
    switch_style( css_title );
  }
}
function set_cookie ( cookie_name, cookie_value,
    lifespan_in_days, valid_domain )
{
    // http://www.thesitewizard.com/javascripts/cookies.shtml
    var domain_string = valid_domain ?
                       ("; domain=" + valid_domain) : '' ;
    document.cookie = cookie_name +
                       "=" + encodeURIComponent( cookie_value ) +
                       "; max-age=" + 60 * 60 *
                       24 * lifespan_in_days +
                       "; path=/" + domain_string ;
}
function get_cookie ( cookie_name )
{
    // http://www.thesitewizard.com/javascripts/cookies.shtml
    var cookie_string = document.cookie ;
    if (cookie_string.length != 0) {
        var cookie_value = cookie_string.match (
                        '(^|;)[\s]*' +
                        cookie_name +
                        '=([^;]*)' );
        return decodeURIComponent ( cookie_value[2] ) ;
    }
    return '' ;
}

var style\u cookie\u name=“style”；
var style_cookie_duration=30；
var style_domain=“#”；
//您不需要自定义此行以下的任何内容
函数开关\u样式（css\u title）
{
//您可以在您提供的网站上免费使用此脚本
//您不会从中删除此通知或下面的URL
// http://www.thesitewizard.com/javascripts/change-style-sheets.shtml
变量i，链接标签；
对于（i=0，link_tag=document.getElementsByTagName（“link”）；
i

使用

onchange

jQuery处理程序并将

value

传递给

switch\u style

函数

---

在纯Javascript中，您可以使用以下内容：

HTML:

JSFIDLE示例：

在JQuery中，键入稍微少一些，但您需要加载JQuery库：

HTML:

JSFIDLE示例：

问候

---

迈克

像这样吗？默认蓝粉色谢谢！它帮助了，它帮助了。现在它会自动更改为列表上的主题。但是，当您单击“提交”按钮时，我需要更改它，而不是仅单击列表中的某些内容时。@Chris-然后您需要-将HTML代码包装到HTML表单元素中-然后-为提交事件添加事件处理程序。我不太明白这一点。你能进一步解释一下吗？

var style_cookie_name = "style" ;
var style_cookie_duration = 30 ;
var style_domain = "#" ;

// You do not need to customise anything below this line

function switch_style ( css_title )
{
// You may use this script on your site free of charge provided
// you do not remove this notice or the URL below. Script from
// http://www.thesitewizard.com/javascripts/change-style-sheets.shtml
  var i, link_tag ;
  for (i = 0, link_tag = document.getElementsByTagName("link") ;
    i < link_tag.length ; i++ ) {
    if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) &&
      link_tag[i].title) {
      link_tag[i].disabled = true ;
      if (link_tag[i].title == css_title) {
        link_tag[i].disabled = false ;
      }
    }
    set_cookie( style_cookie_name, css_title,
      style_cookie_duration, style_domain );
  }
}
function set_style_from_cookie()
{
  var css_title = get_cookie( style_cookie_name );
  if (css_title.length) {
    switch_style( css_title );
  }
}
function set_cookie ( cookie_name, cookie_value,
    lifespan_in_days, valid_domain )
{
    // http://www.thesitewizard.com/javascripts/cookies.shtml
    var domain_string = valid_domain ?
                       ("; domain=" + valid_domain) : '' ;
    document.cookie = cookie_name +
                       "=" + encodeURIComponent( cookie_value ) +
                       "; max-age=" + 60 * 60 *
                       24 * lifespan_in_days +
                       "; path=/" + domain_string ;
}
function get_cookie ( cookie_name )
{
    // http://www.thesitewizard.com/javascripts/cookies.shtml
    var cookie_string = document.cookie ;
    if (cookie_string.length != 0) {
        var cookie_value = cookie_string.match (
                        '(^|;)[\s]*' +
                        cookie_name +
                        '=([^;]*)' );
        return decodeURIComponent ( cookie_value[2] ) ;
    }
    return '' ;
}

<select id="changestyle" name="theme" onchange="changeStyle()">
 <option value="default">Default</option>
 <option value="blue">Blue</option>
 <option value="pink">Pink</option>
</select>

function changeStyle(){
    var mySelect = document.getElementById("changestyle");
    var myValue = mySelect.options[mySelect.selectedIndex].value;
    alert( 'myValue = ' + myValue );
}

<select id="changestyle" name="theme">
 <option value="default">Default</option>
 <option value="blue">Blue</option>
 <option value="pink">Pink</option>
</select>

$(document).ready(function(){

    $('#changestyle').change(function(){
      alert($('#changestyle').val());
    });

});