Question

HTML

<label>
  <select id="foo">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</label>

<label>
  <select id="bar">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</label>

<label>
  <select id="foobar">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</label>

Jquery的

$(document).on("change", "#foo, #bar, #foobar", function(){
    $("#bar").val($("#foo").val()).trigger("change");
  /* Do something for #foo & #bar*/

  /* Run this when all changes are done */
    console.log("done");
})

问题运行上述内容时，我得到Uncaught RangeError: Maximum call stack size exceeded我理解，因为更改事件无限期重复。</ p>

如何避免这种情况？我有这些元素的通用Change代码，它们都需要在最后运行相同的函数，但只有在触发了所有Change个事件之后。注意：.trigger("change")是必需的，我过分简化了代码。

JSFiddle here

修改添加的代码与我的代码更相似。

Answer 1

使用一个而不是如下

public class Books extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_books);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    ListView booksListView = (ListView)findViewById(R.id.booksListView);

    final ArrayList<String> topBooks = new ArrayList<String>(asList("1984", "To Kill a Mockingbird", "Pride and Prejudice",
            "Harry Potter and the Sorcerer's Stone", "The Great Gatsby","Jane Eyre","Wuthering Heights","The Catcher in the Rye",
            "The Hobbit","Brave New World","The Lord of the Rings: The Fellowship of the Ring","Don Quixote",
            "Catch-22","The Count of Monte Cristo","Harry Potter and the Goblet of Fire","The Grapes of Wrath","The Adventures of Huckleberry Finn",
            "The Diary of a Young Girl","Gone with the Wind","Harry Potter and the Deathly Hallows","Moby Dick","Harry Potter and the Half-Blood Prince","War and Peace",
            "Animal Farm","Anna Karenina","Ulysses","Lord of the Flies","The Divine Comedy","One Hundred Years of Solitude","Frankenstein","The Perks of Being a Wallflower",
            "The Fault in Our Stars","Good to Great","Harry Potter and the Chamber of Secrets","Harry Potter and the Order of the Phoenix","Harry Potter and the Prisoner of Azkaban",
            "The Amazing Adventures of Kavalier & Clay","The Hunger Games","The Lord of the Rings: The Two Towers","The Lord of the Rings: The Return of the King", "The Maze Runner",
            "Looking for Alaska","Fahrenheit 451", "Hamlet","Gullivers Travels","The Canterbury Tales","Rebecca","The Brothers Karamazov","Lover Awakened","At Grave's End"));

    ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, topBooks);

    booksListView.setAdapter(arrayAdapter);

    final MediaPlayer mPlayer = MediaPlayer.create(this,R.raw.pindrop);

    booksListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

            if(view.getAlpha()==1f) {

                Toast.makeText(getApplicationContext(), "You Read " + topBooks.get(position), Toast.LENGTH_LONG).show();
                view.animate().alpha(0.2f);
                mPlayer.start();
            }

            else {

                view.animate().alpha(1f);

            }
        }
    });
}

Answer 2

就个人而言，我考虑使用Javascripts requestAnimationFrame（）。它有点作弊，但可以让你在不锁定浏览器的情况下无限制地检查。

我甚至考虑将@Thangaranja的部分答案与此结合起来。例如（交换＆＃39;一个＆＃39;到＆＃39; on＆＃39;）;

function check_changes(){
  $(document).on("change", "#foo, #bar", function(){
    $("#bar").val($("#foo").val()).trigger("change");
    * Do something for #foo & #bar*/

    /* Run this when all changes are done */
    console.log("done");
  })
}

requestAnimationFrame(check_changes);

这是一个未经考验的想法，但可能适合你。

Answer 3

由于您是通过ajax获取新选项，我建议将字段名称和值传递给此函数，就像这样。您需要更改字段名称，但这应该是有意义的。

onChange="menuChange('fieldname', this.value)"

function menuChange(field, value){


    switch(field){

        case "class":
        document.getElementById("class").options.length = 0;
        document.getElementById("category").options.length = 1;
        document.getElementById("subcategory").options.length = 1;
        break;

        case "category":
        document.getElementById("category").options.length = 0;
        document.getElementById("subcategory").options.length = 1;
        break;

        case "subcategory":
        document.getElementById("subcategory").options.length = 0;
        break;

    }
    document.getElementById(field).options.length = 0;

    $.ajax({
        url: "ajaxrequest.php",
        type: "post",
        data: { field: field,
              value: value },
        success: function (response) {

           console.log(response);
           document.getElementById(field).innerHTML = response;               

        },
        error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus, errorThrown);
        }


    });



}

将它放入图像中：

组首先填充，没有别的，当组更改时，类更新为组的值，当类更改时，类别更新为类的值.........

多个元素的一个更改事件，一次运行函数

3 个答案: