javascript - 通过 ajax 和 jQuery 根据获取结果选择值

Question

我在以下方面有点麻烦......

我有 2 种基本选择形式:

<select id="data" onchange="getMetals(this.value)">
<option value="-1">Select a color</option>
<option value="1">Red</option>
<option value="2">Blue</option>
</select>

<select id="dynaData">
<option value="-1">Please make a selection</option>
</select>

现在，在第一个选择中，我通过“ajax”填充了第二个选择上的选项，该部分工作正常，但第二个选择中的一些选项有更多“选项”

所以当第二个选择被填充时，我得到类似的东西:

    <select id="dynaData">
     <option value="-1">Please make a selection</option>
     <option value="1">Raw Metal</option>
     <option value="2">Titanium</option>
     <option value="3">Steel</option>
    </select>

直到此时 ajax 工作正常，在 ajax 之前我使用直接 SQL 查询来填充选项并且输出在任何其他 jquery 之前，现在，我必须先执行 ajax 然后再执行 jQuery，使用此 jQuery 的想法是获取用户正在选择的值，以便我可以显示更多选项...问题是即使是简单的 .addClass 也无法正常工作。流程如下:

HTML from PHP -- > Ajax to Populate Select boxes -- > Get Value from selected box
       ^                        ^                             ^
       |________________________|_____________________________| <-- Working
                                         ^                       ^
                                         |_______________________|  <-- Not Working

因此用户从第一个选择框中进行选择，然后填充第二个选择框，然后用户从第二个选择框中进行选择，我需要获取值，但无法正常工作...

现在，起初我认为问题是因为 ajax 正在获取 json 数据来填充第二个选择框，所以我将其更改为原始 html...HTML 是基于第二个文件形成的第一个请求...

问题是在ajax被触发之后，但是ajax是一个需要的函数。

每次执行 ajax 时死掉的脚本是:

var hash = jQuery.noConflict();
hash("select").change(function(){
        var mSt = $(this).find("option:selected").val(); // Value from 2dn select
        if (mSt == 3){
            $("#noShow").css('border', '1px solid red');
            return false;
        } else { $("#noShow").css('border', '1px solid green'); return true; }
    });

我这样做是为了更好地理解，所以，在 ajax 之前这段代码工作正常，但是在 ajax 填充第二个框之后它就死了!我做了一点“调试”，但一切似乎都运行良好，然后我认为可能存在 Java 冲突，但没有，根本没有冲突。

我真的想不通，如何获取值...任何帮助将不胜感激......

请记住，第二个框没有选项，选项来自基于第一个框的 ajax 请求...我的 ajax 非常简单...

function getMetals(Metals) {
        var strURL ="ajax/metal.php?val="+Metals;
        var req = getXMLHTTP();
        if (req) {
            req.onreadystatechange = function() {
                if (req.status == 200) {
                    document.getElementById('metals').innerHTML=req.responseText;
                }
            };
            req.open("GET", strURL, true);
            req.send(null);
        }
    }

感谢您抽出宝贵时间...

Answer 1

使用 .on 将事件与动态添加的元素 Hook 。

尝试，

var hash = jQuery.noConflict();

hash(document).on('change','select',function(){
        var mSt = $(this).find("option:selected").val(); // Value from 2dn select
        if (mSt == 3){
            $("#noShow").css('border', '1px solid red');
            return false;
        } else { $("#noShow").css('border', '1px solid green'); return true; }
    });