【问题标题】:Capture Selected Values from Dynamic Drop-down Lists using Javascript使用 Javascript 从动态下拉列表中捕获选定的值
【发布时间】:2019-11-22 13:00:18
【问题描述】:

我正在尝试从表单中的动态下拉列表中获取值,但我的代码不起作用。

查看.php

<div class="input_fields_wrap">
    <input type="button" class="btn btn-info add_field_button" value="Tambah Cara Pengolahan" /> <br /><br />
</div>
<div class="service-container" data-service=
    "<div class='form-group'>
        <select class='form-control' style='width:88%; display:inline-block; margin-right:10px;' name='cara_pengolahan[]' required>
            <option value=''>No Selected</option>
            <?php foreach($pengolahan as $row):?>
            <option value='<?php echo $row->id_pengolahan;?>'><?php echo $row->cara_pengolahan;?></option>
            <?php endforeach;?>></div>
        </select>
        <button class='btn btn-danger closebtn remove_field'><b>&times</b></button>
    </div>"
</div>

Javascript.js

$('.service-container').each(function() {
    var container = $(this);
    var service = container.data('service');
    // Service variable now contains the value of html + php variable;  

    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append(service);
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    })
});
var cara_pengolahan = document.forms[0].elements["cara_pengolahan[]"];
if(typeof cara_pengolahan !== 'undefined'){
    for (var i=0; i<cara_pengolahan.length; i++) {
        console.log(cara_pengolahan[i].value);
    }
}

当有一个动态下拉列表时,返回它的所有数组值。但我想要的是捕获该下拉列表的选定值。

当有多个动态下拉列表时,它会返回该下拉列表的正确选择值。

如何抓取所有动态下拉列表的选中值? 提前致谢。

【问题讨论】:

  • 你可以选择$(".CommanClassyourselectbox").find("option:selected").val();
  • 我使用数组作为 html 元素的名称(下拉列表),因此我为此定义了 cara_pengolahan[]。我已经尝试过您的建议,但没有奏效。

标签: javascript jquery html


【解决方案1】:

试试这个:

myval= $("#id").find("option:selected").val();

#id 是你的选择输入的 id

【讨论】:

  • 检查 html 页面以确保您拥有正确的 id(您必须将 #id 替换为 #your_id
  • cara_pengolahan[] 似乎不是 html 元素的有效 id。你为什么在 id 中使用刹车?
  • 对不起,我的意思是,我使用数组作为 html 元素的名称(下拉列表),所以我为此定义了 cara_pengolahan[]。括号表示此类下拉列表的值将作为数组发布,因此另一个下拉列表仅表示现有数组中的另一个值。您可以从上面的代码中看到我的代码和结果。我已经尝试过你的建议,但没有奏效。
【解决方案2】:

要检查是否存在动态下拉,您可以简单地检查选择器是否存在 与

 $('#elemId').length&gt;0

对于选定的值,您可以使用 $("#selectorid").find("option:selected").val();

【讨论】:

  • 我使用数组作为 html 元素的名称(下拉列表),所以我像上面的代码一样为它定义了 cara_pengolahan[]。所以,你的建议是行不通的。
猜你喜欢
  • 1970-01-01
  • 2020-01-07
  • 2022-12-10
  • 2013-09-21
  • 2010-11-08
  • 2018-10-28
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多