Блог

Главная - Вопросы по программированию - Как поместить выбранный элемент в поле ввода с помощью js или jquery?

Как поместить выбранный элемент в поле ввода с помощью js или jquery?

#javascript #html #jquery #css

Вопрос:

Всем привет~ Я новичок в программировании, и мой английский не очень хорош. Я постараюсь изо всех сил описать свою проблему!

В настоящее время я хочу реализовать функцию

  1. Щелкните поле ввода, чтобы открыть окно
  2. Выберите некоторые параметры в окне
  3. Выбранные параметры можно поместить в это поле ввода…
  4. Параметры можно проверить

Но я нахожусь на этапе выбора параметров и ввода в поле ввода. Когда это трудно, я не знаю, как этого достичь! Поэтому было бы лучше спросить вас, как выполнить эту часть?

спасибо вам всем!

 $(function(){
  $('.input_box').on('click',function(){
    $('.sport').css('display','block');
  })
})

$(function(){
  $('.sport').click(function(e){
    if(e.target.classList.contains('sport')){
      $(this).css('display','none');
    }
  })
})

// Attempt to compose failed

// $(function(){
//   $('.item').on('click',function(e){
//     console.log(e.value);
//   })
// }) 
 .input_box {
  width: 500px;
  height: 60px;
  font-size: 30px;
}

.sport {
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  display: none;
}

.sport_content {
  width: 500px;
  padding: 20px;
  margin: 0 auto;
  background-color: red;
}
.sport_content .title {
  text-align: center;
}
.sport_content .category {
  display: flex;
}
.sport_content .category .item {
  width: 100px;
  background-color: yellow;
  border-radius: 10px;
  padding: 10px;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label for="">Choose your favorite sport</label><br>
<input type="text" placeholder="Put in your favorite sports" class="input_box">

<div class="sport">
  <div class="sport_content">
     <h2 class="title">Aerobic exercise</h2>
     <ul class="category">
       <li class="item" value="跑步">RUN</li>
       <li class="item" value="游泳">Swim</li>
     </ul>
  </div>
</div>

Ответ №1:

Я изменил ваш код.Я надеюсь, что это соответствует вашим потребностям

 $(function(){
  $('.input_box').on('click',function(){
    $('.sport').css('display','block');
  })
})

$(function(){
  $('.sport').click(function(e){
    if(e.target.classList.contains('sport')){
      $(this).css('display','none');
    }
  })
})

// Attempt to compose failed

$(function(){
  $('.item').on('click',function(e){
    // only a little change here
    const val = e.target.getAttribute("value");
    $('.input_box').val(val);
    $('.sport').trigger("click");
  })
}) 
 .input_box {
  width: 500px;
  height: 60px;
  font-size: 30px;
}

.sport {
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  display: none;
}

.sport_content {
  width: 500px;
  padding: 20px;
  margin: 0 auto;
  background-color: red;
}
.sport_content .title {
  text-align: center;
}
.sport_content .category {
  display: flex;
}
.sport_content .category .item {
  width: 100px;
  background-color: yellow;
  border-radius: 10px;
  padding: 10px;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label for="">Choose your favorite sport</label><br>
<input type="text" placeholder="Put in your favorite sports" class="input_box">

<div class="sport">
  <div class="sport_content">
     <h2 class="title">Aerobic exercise</h2>
     <ul class="category">
       <li class="item" value="跑步">RUN</li>
       <li class="item" value="游泳">Swim</li>
     </ul>
  </div>
</div>

Комментарии:

1. Прежде всего, спасибо, что рассказали мне об этом и о методе~ Но поскольку я новичок, у меня есть вопрос~ Если сегодня я надеюсь, что элементы в окне могут быть выбраны несколькими, а не одним, как мне это переписать?

2. простой способ добиться изменения множественного выбора $('.input_box').val(val); $('.input_box').val(val $('.input_box').val()); .если вы хотите,чтобы пользователь завершил множественный выбор в одном всплывающем окне, для этого нужно больше css и js

Ответ №2:

 jQuery(document).ready(function () {
        $('.input_box').on('click',function(){
            $('.sport').css('display','block');
        });
        $('.sport').click(function(e){
            if(e.target.classList.contains('sport')){
                $(this).css('display','none');
            }
        })
        $('ul.category > li').on('click',function (){
            const value = $(this).attr('data-value');
            $('#input').val(value);


        })
    }) 
  .input_box {
        width: 500px;
        height: 60px;
        font-size: 30px;
    }

    .sport {
        background-color: rgba(0, 0, 0, 0.3);
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        display: none;
    }

    .sport_content {
        width: 500px;
        padding: 20px;
        margin: 0 auto;
        background-color: red;
    }
    .sport_content .title {
        text-align: center;
    }
    .sport_content .category {
        display: flex;
    }
    .sport_content .category .item {
        width: 100px;
        background-color: yellow;
        border-radius: 10px;
        padding: 10px;
    }
    ul li{
        cursor: pointer;

    }
    ul li:first-child{
        margin-right: 20px;
    } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<label for="">Choose your favorite sport</label><br>
<input type="text" id="input" placeholder="Put in your favorite sports" class="input_box">

<div class="sport">
    <div class="sport_content">
        <h2 class="title">Aerobic exercise</h2>
        <ul class="category">
            <li class="item" data-value="跑步">RUN</li>
            <li class="item" data-value="游泳">Swim</li>
        </ul>
    </div>
</div>

Комментарии:

1. Прежде всего, спасибо, что рассказали мне об этом и о методе~ Но поскольку я новичок, у меня есть вопрос~ Если сегодня я надеюсь, что элементы в окне могут быть выбраны несколькими, а не одним, как мне это переписать?

Метки: