Изменить текст при выборе значения параметра = ""

это мой код динамического раскрывающегося меню, и я хочу изменить текст первой опции, у которой нет идентификатора, а значение пусто!

это код:

<div class = "my-tours">
    <select name = "tours">
        <option value = "">All</option>
        <option value = "america">America</option>
    </select>
</div>

А где твой сценарий?

Ason 15.03.2018 18:33

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

Luis felipe De jesus Munoz 15.03.2018 18:44
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
36
3

Ответы 3

В вашем вопросе неясно, что вы хотите в качестве вывода. но вы измените значение первой опции, сделав что-то вроде этого:

$("#select-id option:first").attr("value", "");

$('#tours > option:not([id])').filter(function () {
  let val = $(this).attr('value');
  return val === undefined || val === '';
}).first().text('First id-less with no value');
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "my-tours">
    <select name = "tours" id = "tours">
        <option value = "mexico">Mexico</option>
        <option value = "">All</option>
        <option value = "america">America</option>
        <option>Nowhere</option>
    </select>
</div>

Я добавил идентификатор к тегу <select>, чтобы упростить его выбор и сделать запросы DOM для него более эффективными. Я настоятельно рекомендую это сделать, но если по какой-то причине вы не можете добавить идентификатор, вы также можете выбрать его с помощью $('select[name = "tours"]').

Вот что это делает шаг за шагом:

  • $('#tours > option:not([id])') выбирает все теги <option> внутри #tours, у которых нет атрибута id.
  • Функция фильтра отфильтровывает любые параметры, у которых есть атрибут значения, который не является пустым. Мне пришлось использовать функцию для учета обоих вариантов без атрибута значения вообще и тех, у которых есть пустой атрибут значения. Если вы можете быть уверены, что все параметры будут иметь атрибут значения, вы можете вместо этого использовать селектор .filter('[value = ""]').
  • .first() выбирает первый вариант, соответствующий нашему фильтру.
  • .text() устанавливает новый текст.

Вот. Используйте атрибут name и :first в селекторе опций.

$(document).ready(function() {
  $("select[name='tours'] option:first").text("wow");
});
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "my-tours">
  <select name = "tours">
        <option value = "">All</option>
        <option value = "america">America</option>
    </select>
</div>

Другие вопросы по теме