jquery 如果输入中不可用，则从选择中获取ID

vzgqcmou 于 2023-03-07 发布在 jQuery

关注(0)|答案(2)|浏览(126)

有一个小功能，现在当你点击一个字段，这个字段的输入id将显示。
但是我还在这里添加了第三个字段，通过yii2上的dropDownList。
问题是这里的id不在input中，而是在select中。
我如何修复javascript，以便在输入中有未定义的id时，从select中获取id？

$('.form-group input').each(function() {
    let input = $(this);
    $(this).closest('.range').find('.it').each(function() {
        $(this).on('click', function () {
           console.log(input.attr('id'));
        })
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="range">
  <div class="form-group">
    <input type="hidden" name="field1" id="field1" value="">
  </div>
  <span class="it" data-value="1">click</span>
  <span class="it" data-value="2">click</span>
</div>
<br>
<div class="range">
  <div class="form-group">
    <input type="hidden" name="field2" id="field2" value="">
  </div>
  <span class="it" data-value="1">click</span>
  <span class="it" data-value="2">click</span>
</div>
<br>
<div class="range">
  <div class="form-group">
    <input type="hidden" name="field3" value="" disabled="">
    <select id="field3" class="d-none" name="field3[]" disabled="" multiple="" size="4" style="display: none">
      <option value="1">$0-20</option>
    </select>
  </div>
  <span class="it" data-value="1">click</span>
  <span class="it" data-value="2">click</span>
</div>

jquery

来源：https://stackoverflow.com/questions/75522439/take-id-from-select-if-not-available-in-input

2条答案

按热度按时间

6jygbczu1#

当输入没有id时，从range容器中获取select元素：

$('.form-group input').each(function() {
    let input = $(this);
    const range = $(this).closest('.range');
    range.find('.it').click(function(e){
      console.log(input.attr('id') || range.find('select').attr('id'));
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="range">
  <div class="form-group">
    <input type="hidden" name="field1" id="field1" value="">
  </div>
  <span class="it" data-value="1">click</span>
  <span class="it" data-value="2">click</span>
</div>
<br>
<div class="range">
  <div class="form-group">
    <input type="hidden" name="field2" id="field2" value="">
  </div>
  <span class="it" data-value="1">click</span>
  <span class="it" data-value="2">click</span>
</div>
<br>
<div class="range">
  <div class="form-group">
    <input type="hidden" name="field3" value="" disabled="">
    <select id="field3" class="d-none" name="field3[]" disabled="" multiple="" size="4" style="display: none">
      <option value="1">$0-20</option>
    </select>
  </div>
  <span class="it" data-value="1">click</span>
  <span class="it" data-value="2">click</span>
</div>

赞(0）回复(0）举报 2023-03-07

92dk7w1h2#

你也可以检查输入

$('.form-group input, .form-group select').each(function() {
    let input = $(this);
    // if the input has a select as an input, ignore it
    if (input.siblings('select').length) return;
    $(this).closest('.range').find('.it').each(function() {
        $(this).on('click', function () {
           console.log(input.attr('id'));
        })
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="range">
  <div class="form-group">
    <input type="hidden" name="field1" id="field1" value="">
  </div>
  <span class="it" data-value="1">click</span>
  <span class="it" data-value="2">click</span>
</div>
<br>
<div class="range">
  <div class="form-group">
    <input type="hidden" name="field2" id="field2" value="">
  </div>
  <span class="it" data-value="1">click</span>
  <span class="it" data-value="2">click</span>
</div>
<br>
<div class="range">
  <div class="form-group">
    <input type="hidden" name="field3" value="" disabled="">
    <select id="field3" class="d-none" name="field3[]" disabled="" multiple="" size="4" style="display: none">
      <option value="1">$0-20</option>
    </select>
  </div>
  <span class="it" data-value="1">click</span>
  <span class="it" data-value="2">click</span>
</div>

或者，您只能选择具有ID的输入
一个二个一个一个

赞(0）回复(0）举报 2023-03-07

我来回答

jquery 如果输入中不可用，则从选择中获取ID

2条答案

相关问题

热门标签

最新问答