HTML hide tag tag внутри тег тега

-2

Я хочу, чтобы параметры выбора отображались, когда вы нажимаете кнопку, но не можете отображать выбранную опцию внутри кнопки.HTML hide tag tag внутри тег тега

Это то, что я до сих пор:

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<button> 
 
<select> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="opel">Opel</option> 
 
    <option value="audi">Audi</option> 
 
</select> 
 
</button> 
 
    
 
</body> 
 
</html>

Это то, что я хочу, чтобы выглядеть, то я буду поместить изображение внутри кнопки

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<button> 
 
<select style="display: none;"> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="opel">Opel</option> 
 
    <option value="audi">Audi</option> 
 
</select> 
 
</button> 
 
    
 
</body> 
 
</html>

источник

2016-06-27 Lawtonj94

Ну, что просто не выглядит как действительный HTML. –

@BramVanroy действительно HTML, однако я не понимаю логики наличия поля 'select' ... внутри кнопки ... –

он запускается, и это всего лишь фрагмент, чтобы продемонстрировать, что я хочу – Lawtonj94

$("#btn, .close").click(function() { 
 
    $(".select-wrapper").toggleClass("active"); 
 
});

.select-wrapper { 
 
    display: none; 
 
    position: fixed; 
 
    width: 100vw; 
 
    height: 100vw; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 10; 
 
    background: rgba(0,0,0,0.3); 
 
} 
 

 
.select-wrapper select { 
 
    font-size: 24px; 
 
    position: absolute; 
 
    left: 50vw; 
 
    transform: translateX(-50%); 
 
} 
 

 
.select-wrapper.active { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="image" src="http://lorempixel.com/120/60/" id="btn"> 
 
<div class="select-wrapper"> 
 
    <input type="button" value="close" class="close"> 
 
    <select> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="opel">Opel</option> 
 
    <option value="audi">Audi</option> 
 
    </select> 
 
</div>

источник

2016-06-27 15:34:17

Я хочу использовать кнопку с изображением на ней, и выбранная опция все еще отображается, которая разрушит макет, который у меня есть – Lawtonj94

Что вы подразумеваете под «выбранным вариантом отображается?»? Как еще пользователь узнает, что они выбрали? –

Я дам ему идентификатор, а затем получаю значение в javascript из идентификатора, отображающая часть не важна. Я попробовал «style = display: none», но это делает так, что параметры не отображаются ни – Lawtonj94

я столкнулся с подобной проблемой, что DEV отказавшегося просто использовать список из-за какой-серверной проблемы.

нашел простой чит, чтобы сделать тег select, чтобы показать все параметры, которые выглядят как выпадающий список, а затем я просто переключаю весь тег select. Не совсем то, о чем вы просите, но выглядит так.

$("#btn, .selector").click(function() { 
 
    $(".select-wrapper").toggleClass("active"); 
 
});

.select-wrapper{ 
 
    display: none; 
 
    } 
 
    
 
    
 
.select-wrapper.active { 
 
    display: block; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 

 
add variable: 
 
<br> 
 
<input type="button" value="add" id="btn"> 
 
<div class="select-wrapper"> 
 
<select size="4" class="selector"> 
 
    <option>Apple</option> 
 
    <option>Pear</option> 
 
    <option>Banana</option> 
 
    <option>Orange</option> 
 
</select> 
 
</div> 
 

 

 

 

 

 
</body>

источник

2017-08-14 00:13:20 user4625557

HTML hide tag tag внутри тег тега

ответ

Смежные вопросы