Вопросы Теги

Выпадающее меню `select` появляется без фиксированной ширины [дубликат]

Вы можете использовать функции empty () и isset (). Если вы хотите, чтобы он работал с разными файлами, просто измените action='yourphp.php' на html, который я вам даю, и store the PHP script на этот файл yourphp.php. Также вам нужно изменить index.html на index.php, чтобы активировать функции PHP.

PHP 

<?php

    error_reporting(0);
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $from = 'From: yoursite.com'; 
    $to = 'contact@yoursite.com'; 
    $subject = 'Customer Inquiry';
    $body = "From: $name\n E-Mail: $email\n Message:\n $message";


    if ($_POST['submit']){
                if (!(empty($_POST['name']))) {
                        if (!(empty($_POST['email']))){
                            if (!(empty($_POST['message']))){
                                mail ($to, $subject, $body, $from);
                                echo '<p>Your message has been sent!</p>';
                            }else{
                                echo '<p>Fill your message please.</p>';}
                        }else {
                            echo '<p>Fill your email please.</p>';}
                }else{
                    echo '<p>Fill your name please.</p>';}              
    }else{
            echo '<p>Fill the form.</p>';}
?>

HTML 

<html>
    <form method="post" action="?">
        <table>
            <tr><td>Name</td><td><input type='text' name='name' id='name'/></td></tr>
            <tr><td>Email</td><td><input type='text' name='email' id='email'/></td></tr>
            <tr><td>Message</td><td><input type='text' name='message' id='message'/></td></tr>
            <tr><td></td><td><input type='submit' name='submit' id='submit'/></td></tr>
        </table>
    </form>
</html>

С наилучшими пожеланиями!

2
задан cdlane 29 February 2016 в 06:12
поделиться

3 ответа

Основываясь на вашей второй ссылке, вы можете сделать это следующим образом: 

var selectId = document.getElementById("yourSelect");

selectId.onchange=function(){
   var selectedValue = selectId.options[selectId.selectedIndex].value; 
   var selectedText = selectId.options[selectId.selectedIndex].text;

   selectId.style.width = 20 + (selectedText.length * 8) + "px";
}

Тест: http://jsfiddle.net/ndquxquu/

2
ответ дан va2ron1 21 August 2018 в 05:15
поделиться

Преобразование в JavaScript и объяснение вашего первого примера ( http://jsfiddle.net/5AANG/4/ ).

Это создает временный элемент <span> и копии стили из окна выбора в диапазон. Затем он измеряет ширину диапазона, устанавливает ширину окна выбора на основе этой ширины и удаляет диапазон из документа.

В обычном старом JavaScript:

Захватить все <select> s: 

var selects = document.querySelectorAll('select');

Добавьте наш слушатель событий (определенный ниже) к каждому: 

for (var i = 0; i < selects.length; i++) {
    selects[i].addEventListener('change', changeWidth);
}

Определите прослушиватель событий: 

function changeWidth (e) {

Определения базовых переменных: 

    var select = e.target;
    var o = select.options[select.selectedIndex];
    var s = document.createElement('span');

Задайте содержимое нашего временного промежутка (s) для содержимого выбранной опции: 

    s.textContent = o.textContent;

Приятная часть! Присвоение <span> стилей выбранного параметра. getComputedStyle ) 

    var ostyles = getComputedStyle(o);
    s.style.fontFamily = ostyles.fontFamily;
    s.style.fontStyle = ostyles.fontStyle;
    s.style.fontWeight = ostyles.fontWeight;
    s.style.fontSize = ostyles.fontSize;

Добавить диапазон к документу, чтобы мы могли захватить его ширину: 

    document.body.appendChild(s);

Установите <select>, основанная на ширине пролета (30 - магическое число, выведенное из вышеупомянутой скрипки). 

    select.style.width = (s.offsetWidth + 30) + 'px';

Quick! Удалите временный промежуток, прежде чем кто-нибудь его увидит! 

    document.body.removeChild(s);
}

Демо: https://jsfiddle.net/Hatchet/a0xzz6mf/

3
ответ дан Hatchet 21 August 2018 в 05:15
поделиться

Я написал этот ответ для другого потока, который только что был закрыт как дубликат этого. Проблема с этими ответами заключается в том, что они немного сложны и используют жестко закодированные значения дополнений, которые могут быть ненадежными. Вот мое решение, которое не требует каких-либо жестко закодированных.

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

Выбор манекена в основном просто надежный метод для измерения того, насколько он должен быть.

Добавьте эту логику к «изменению», и она должна быть хорошей и вручную запускать ее один раз, затем вы должны быть хорошими. 

const select = document.querySelector('select');
select.addEventListener('change', function() {
  const dummySelect = document.createElement('select');
  dummySelect.classList.add('dummy');
  
  const dummyOption = document.createElement('option');
  dummyOption.innerHTML = this.value;
  dummySelect.appendChild(dummyOption);
  
  document.body.appendChild(dummySelect);
  select.style.width = `${dummySelect.offsetWidth}px`;
  
  document.body.removeChild(dummySelect);
});

// Trigger for the first time
select.dispatchEvent(new Event('change'));
select {
  display: inline;
}

.dummy {
  position: absolute;
  left: -10000px;
}
<select>
 <option>A</option>
 <option>A much longer title</option>
 <option>Middleground</option>
</select>

1
ответ дан samanime 21 August 2018 в 05:15
поделиться
Другие вопросы по тегам:

Похожие вопросы: