Question

我正在尝试创建一个网站，您可以使用javascript在不同的设计中进行选择。我使用this作为指南。但是，在指南中，它使用输入标记在不同的样式表之间切换，这使得每个设计都需要一个按钮。有多种设计选择，每个设计都有一个按钮，这对我来说很不方便。我希望它是一个列表，您从该列表中选择您想要使用的设计，然后单击提交按钮以选择该设计。我使用的代码如下所示，但我需要帮助才能使其正常工作。

HTML

<select name="theme">

 <option value="default">Default</option>
 <option value="blue">Blue</option>
 <option value="pink">Pink</option>

</select>

这适用于按钮版本：

<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 '' ;
}

Answer 1

使用onchange jQuery处理程序并将value传递给switch_style函数。

Answer 2

在纯Javascript中，您可以使用：

HTML：

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

JS：

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

JSFiddle示例：http://jsfiddle.net/sundaze/k1s1rmkp/

在JQuery中，它的输入少了一点，但是你需要加载JQuery库：

HTML：

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

JQuery的：

$(document).ready(function(){

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

});

JSFiddle示例：http://jsfiddle.net/sundaze/jjhLzczf/2/

问候麦克

使用<option>标记在CSS样式之间切换

2 个答案: