在select下拉框中，鼠标悬浮在option选项上时做相关操作

最新推荐文章于 2022-10-30 23:13:28 发布

而我想成为一个有趣的妞

最新推荐文章于 2022-10-30 23:13:28 发布

阅读量9k

点赞数

文章标签： option的悬浮时间

本文链接：https://blog.csdn.net/weixin_41728561/article/details/80223012

版权

2018.5 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

功能：

选择option中的某一项（此中包括的是视频链接），根据视频链接生成图片链接，并显示在相应的位置

效果图：

代码：

add.html

<body οnlοad="attachTest()">
<!-- 链接 -->
			<div class="row cl">
				<label class="form form-label col-xs-4 col-sm-2"><span class="c-red">*</span>链接：</label>
				<div class="formControls col-xs-8 col-sm-2">	 
				  <span class="select-box">
					<select name="link" class="select link">
	                    <option value="0">--请选择--</option>
	                    {volist name="videoFirstCategory" id="vo"}
	                    <option value="{$vo.video_category}">{$vo.video_category}</option>
	                    {/volist}
	                </select>
				</span>
				</div>

				<div class="formControls col-xs-8 col-sm-2">
				<span class="select-box">
				<select name="video_id" id="select" class="select video_id"  size=2>
                </select>
				</span>
            </div>
			</div>
			<div class="row cl">
				<label class="form form-label col-xs-4 col-sm-2">视频缩略图：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<img style="display: none;" src="" id="video_img" width="250" height="150">
				</div>
			</div>
			<!-- /链接 -->
</body>

js:

function showselectValue(e) {
	    if (e.target.id!= 'select') {  
	        $('#video_img').attr("src",e.target.title);
	        $('#video_img').show();
	    }   
	}  
	function attachTest() { 
	    document.getElementById('select').addEventListener('mouseover',showselectValue,false);  
	}
//根据视频链接显示视频缩略图
$('#url').bind('input url', function() {
		var link = document.getElementById('url').value;
		console.log(link);
		var id = link.split('?v=')[1];
		var img = 'http://img.youtube.com/vi/'+id+'/0.jpg';
		$('#video_img').attr('src',img);
		$('#video_img_input').attr('value',img);
		$('#video_img').show();
});
//在添加产品页选择链接
$('.link').change(function(){
		category = $(this).val();
		// alert($(this).val());
		url = SCOPE.link;
		postData = {'category':category};
		$.post(url,postData,function(result){
			// console.log(result);
			if(result.status==1){
				data = result.data.data;
				link_html = "";
	            for(var i=0;i<data.length;i++){
	            	link_html+="<option title='"+data[i]['video_img']+"' value='"+data[i]['id']+"'>"+data[i]['title']+"</option>";
	            	 // console.log(data[i]['id']);
	            }
	           
	            $('.video_id').html(link_html);
			}else if(result.status===0){
				 $('.video_id').html('');
			}
		});

	});

edit.html

<body  οnlοad="attachTest()">
<div class="row cl">
				<label class="form form-label col-xs-4 col-sm-2"><span class="c-red">*</span>链接：</label>
				<div class="formControls col-xs-8 col-sm-2">	 
				  <span class="select-box">
					<select name="link" id="link" class="select link">
	                    <option value="0">--请选择--</option>
	                    {volist name="videoFirstCategory" id="vo"}
	                    <option value="{$vo.video_category}"{if condition="$wig.link eq $vo.video_category"} selected="selected" {/if}>{$vo.video_category}</option>
	                    {/volist}
	                </select>
				</span>
				</div>
				<div class="formControls col-xs-8 col-sm-2">
				<span style="width: 300px;" class="select-box">
				<select name="video_id" id="select" class="select video_id"  size=2>
                    {volist name="$se_link_option" id="vo"}
                    <option title="{$vo.video_img}" value="{$vo.id}" {if condition="$vo.id eq $wig.video_id"} selected="selected" {/if}>{$vo.title}</option>
                    {/volist}
                </select>
				</span>
            </div>
			</div>
			<div class="row cl">
				<label class="form form-label col-xs-4 col-sm-2">视频缩略图：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<img  src="{$link.video_img}" id="video_img" width="250" height="150">
				</div>
			</div>
</body>

对于相关数据是如何获取的就不一一列举了，在此主要是提供一个思路