我有一个表格,允许用户选择一个图像形式的列表或添加有自己的。
当其中一个输入被使用时,我希望其他输入数据被删除。我能够使选择选项空时,选择一个图像的文件类型输入,但我不知道如何使文件类型空时,一个可选的图像被选中。
下面是我代码示例,以帮助人们理解:
$('#imglookupbox').on('focus', function(e) {
$('#imglookupbox + .dropdown .dropdown-menu').show();
});
$(document).on('click', function(e) {
if ($(e.target).closest('#imglookupbox').length === 0) {
$('#imglookupbox + .dropdown .dropdown-menu').hide();
}
});
function Findimage() {
var Clickedimage = event.target.getAttribute('src');
var ImageName = FormatURL(Clickedimage);
var file = $('#image');
$("#imglookupbox").val(ImageName);
file[0].files = null;
$('#imglookupbox + .dropdown .dropdown-menu').hide();
event.stopPropagation();
}
function previewImage() {
$("#imglookupbox").val('');
$("#Imagediscriptextbox").val("N/A");
}
function FormatURL(ImagePath) {
var Imagename = ImagePath.split('/')[2];
return Imagename;
}
.dropdown {
position: relative;
margin-top: 30px;
float: left;
}
.dropdown-menu {
display: none;
position: absolute;
z-index: 1;
background-color: #f9f9f9;
border: 1px solid #ccc;
padding: 5px;
max-height: 150px;
overflow-y: auto;
}
.dropdown-menu li {
cursor: pointer;
padding: 5px;
}
.dropdown-menu li:hover {
background-color: #ddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="imglookupbox" name="selctedimage" type="text" aria-label="Text input with dropdown button">
<div class="dropdown">
<ul id="Imageoptions" class="dropdown-menu">
<li>
<img onclick='Findimage()' class='Img_Selection' src='DataBaseSetup/Images/Image1' alt='image1'>
</li>
<li>
<img onclick='Findimage()' class='Img_Selection' src='DataBaseSetup/Images/Image2' alt='image2'>
</li>
<li>
<img onclick='Findimage()' class='Img_Selection' src='DataBaseSetup/Images/Image3' alt='image3'>
</li>
</ul>
</div>
<div id="AddNewImagetxt">
<p>Add new image.</p>
</div>
<div class="input-group4 Sub" id="UploadImg">
<input type="file" id="image" name="image" onchange="previewImage()">
</div>
我该怎么做呢?
1条答案
按热度按时间yhxst69z1#
您可以使用以下代码段:
字符串