在 <选项> 标记中使用 href 链接链接到 URL

using href links inside <option> tag to link to url

本文关键字：链接 href URL 选项      更新时间：2023-09-26

>我刚刚从本主题下载了源代码

http://tympanus.net/codrops/2012/11/29/simple-effects-for-drop-down-lists/

演示 http://tympanus.net/Development/SimpleDropDownEffects/index6.html

并将其添加到我的一个项目中并且工作正常，但我想添加链接作为值以链接到任何网站作为 ahref我发现了另一个主题的一些东西，但没有与我一起工作，它是很久写的，所以我添加了这个主题 

<select id="cd-dropdown" name="cd-dropdown" class="cd-select">
   <option value="-1" selected>choose an option to test</option>
   <option value="1" class="icon-monkey">Students</option>
   <option value="2" class="icon-bear">Courses</option>
   <option value="3" class="icon-squirrel">Instructors</option>
   <option value="4" class="icon-elephant">Departments</option>

试试这个

 <select id="cd-dropdown" name="cd-dropdown" class="cd-select">
   <option value="-1" selected>choose an option to test</option>
   <option value="1" class="icon-monkey">Students</option>
   <option value="2" class="icon-bear">Courses</option>
   <option value="3" class="icon-squirrel">Instructors</option>
   <option value="4" class="icon-elephant">Departments</option> 
</select>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
    jQuery('#cd-dropdown').on('change', function(){
        if(jQuery(this).val() == 1){
        window.location.href = 'http://google.com'
        }
        // and so on
        })
</script>

您必须为所有选项jQuery代码提供目标URL。

试试这个

$('#cd-dropdown').on('change', function(){
var value = $(this).val();
if(value == 1){ // that is for Students
window.location.href = 'http://google.com';
}
// and so on
})

试试这个

$('.cd-dropdown li').click(function(){
  if($(this).attr('data-value')==1){
    window.location.href = 'http://google.com';
  }
})

该插件将选择框 [id=cd-dropdown] 替换为 ul [class=cd-dropdown]

相关文章：