Nano Hash - криптовалюты, майнинг, программирование

jQuery выбрать изменить показать/скрыть событие div

Я пытаюсь создать форму, в которой при выборе элемента «посылка» будет отображаться div, но когда он не выбран, я хотел бы скрыть div. Вот моя разметка на данный момент:

Это мой HTML до сих пор.

    <div class="row">    
    Type
        <select name="type" id="type" style="margin-left:57px; width:153px;">
                <option ame="l_letter" value="l_letter">Large Letter</option>
                <option name="letter" value="letter">Letter</option>
                <option name="parcel" value="parcel">Parcel</option>
        </select>                    
</div>

<div class="row" id="row_dim">
    Dimensions
        <input type="text" name="length" style="margin-left:12px;" class="dimension" placeholder="Length">
        <input type="text" name="width" class="dimension" placeholder="Width">
        <input type="text" name="height" class="dimension" placeholder="Height">
</div>

Это мой jQuery до сих пор.

  $(function() {
    $('#type').change(function(){
        $('#row_dim').hide(); 
        $("select[@name='parcel']:checked").val() == 'parcel').show();   
    });
});
html hide jquery show
02.09.2013

Ответы:


1

Используйте следующий JQuery. Демо

$(function() {
    $('#row_dim').hide(); 
    $('#type').change(function(){
        if($('#type').val() == 'parcel') {
            $('#row_dim').show(); 
        } else {
            $('#row_dim').hide(); 
        } 
    });
});
02.09.2013

2

Пытаться:

if($("option[value='parcel']").is(":checked"))
   $('#row_dim').show();

Или даже:

$(function() {
    $('#type').change(function(){
        $('#row_dim')[ ($("option[value='parcel']").is(":checked"))? "show" : "hide" ]();  
    });
});

JSFiddle: http://jsfiddle.net/3w5kD/

02.09.2013
  • Псевдоселекторы jQuery не являются подходящим интерфейсом для проверки значений формы. 02.09.2013
  • @i_like_robots плохо влияет на производительность? это менее читабельно? или просто не в моде? 02.09.2013
  • Производительность псевдоселекторов довольно низка — приходится перепрыгивать через множество обручей — но селекторы на самом деле предназначены для обхода объектов DOM, и есть специальные интерфейсы для проверки входных значений формы. 02.09.2013
  • @i_like_robots я согласен, и я вижу их всех в других ответах .. поэтому я даю нетривиальную альтернативу;) 02.09.2013
  • Вот несколько слабо связанных тестовых случаев, сравнивающих псевдоселекторы jQuery с альтернативными интерфейсами: jsperf.com/eq-pseudo-selector-and-reduce-performance/2 jsperf.com/animated-pseudo-selector/3 jsperf.com/jquery- самый быстрый-neq-фильтр 02.09.2013
  • @i_like_robots спасибо, приятно знать, что $items.filter(function(i) (пользовательский фильтр) на самом деле быстрее, чем кажется 02.09.2013

    • 3

    измените свой метод jquery на

    $(function () { /* DOM ready */
    $("#type").change(function () {
        alert('The option with value ' + $(this).val());
        //hide the element you want to hide here with
        //("id").attr("display","block"); // to show
        //("id").attr("display","none"); // to hide
    });
});
    02.09.2013

    4 
    <script>  
$(document).ready(function(){
    $('#colorselector').on('change', function() {
      if ( this.value == 'red')
      {
        $("#divid").show();
      }
      else
      {
        $("#divid").hide();
      }
    });
});
</script>

    Сделайте так для каждого значения. Также измените значения... в соответствии с вашими параметрами.

    01.08.2017

    5

    Попробуйте приведенный ниже JS

    $(function() {
    $('#type').change(function(){
        $('#row_dim').hide(); 
        if ($(this).val() == 'parcel')
        {
             $('#row_dim').show();
        }
    });
});
    02.09.2013

    6

    Попробуй это:

    $(function() {
    $("#type").change(function() {
        if ($(this).val() === 'parcel') $("#row_dim").show();
        else $("#row_dim").hide();
    }
}
    02.09.2013

    7

    Попробуй это:

     $(function () {
     $('#row_dim').hide(); // this line you can avoid by adding #row_dim{display:none;} in your CSS
     $('#type').change(function () {
         $('#row_dim').hide();
         if (this.options[this.selectedIndex].value == 'parcel') {
             $('#row_dim').show();
         }
     });
 });

    Демонстрация здесь

    02.09.2013

    8

    Ничего нового, но кэширование ваших коллекций jQuery немного повысит производительность.

    $(function() {

    var $typeSelector = $('#type');
    var $toggleArea = $('#row_dim');

    $typeSelector.change(function(){
        if ($typeSelector.val() === 'parcel') {
            $toggleArea.show(); 
        }
        else {
            $toggleArea.hide(); 
        }
    });
});

    И в vanilla JS для супер скорости:

    (function() {

    var typeSelector = document.getElementById('type');
    var toggleArea = document.getElementById('row_dim');

    typeSelector.onchange = function() {
        toggleArea.style.display = typeSelector.value === 'parcel'
            ? 'block'
            : 'none';
    };

});
    02.09.2013

    9

    Я использовал следующий фрагмент на основе jQuery, чтобы select-элемент отображал div-элемент, у которого есть id, совпадающий с value элемента option, и скрывал div, которые не совпадают. Не уверен, что это лучший способ, но это способ.

    $('#sectionChooser').change(function(){
    var myID = $(this).val();
    $('.panel').each(function(){
        myID === $(this).attr('id') ? $(this).show() : $(this).hide();
    });
});
    .panel {display: none;}
#one {display: block;}
    <select id="sectionChooser">
    <option value="one" selected>Thing One</option>
    <option value="two">Thing Two</option>
    <option value="three">Thing Three</option>
</select>

<div class="panel" id="one">
    <p>Thing One</p>
</div>
<div class="panel" id="two">
    <p>Thing Two</p>
</div>
<div class="panel" id="three">
    <p>Thing Three</p>
</div>

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

    21.10.2017
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..