Javascript JQuery：为未知数量（动态）字段创建更改事件

如果我有一个表格，其中可能有一个或多个地址部分，用laravel表格包装：类似于：

{{ Form::text('street1', '', ['class' => '']) }}
{{ Form::label('state1', 'State', ['class' => '']) }}
{{ Form::label('country1', 'Country', ['class' => '']) }}


{{ Form::text('street2', '', ['class' => '']) }}
{{ Form::select('state2', 'State', ['class' => '']) }}
{{ Form::select('country2', 'Country', ['class' => '']) }}

以及根据所选国家填充状态选择器的脚本。因此，如果

country1

设置为USA，则

state1

的下拉列表将仅为美国的州。我可以通过使用每个字段的ID硬编码JQuery脚本来实现这一点。但是，我希望动态地这样做，因为可能不止两个字段

$('select[id="country1"]').on('change', function() { ... }

---

是否有一种方法可以创建一个循环，为每组字段生成

on.change

事件？

无需为每组字段生成

on.change

事件。您可以在所有的

选择上应用onChange事件，在函数体中，您可以使用
此
来获取当前的
选择
，并可以使用类似的方法进行更改

 $('select').on('change', function(){

     /* 
     for example you have different ids for different selects then you can 
     simply get the id of the current element to recognize it.
     */
    

   id = $(this).attr('id');

// then place the condition to recognize and do your stuff.

  if (id == 'country1'){
    // code stuff for country 1
  }elseif(id == 'country2')
  {
    // code stuff for country 2
  }

   value = this.value;// example get the value

});

编辑

无论您有多少个
select
，都必须在
id
或任何
数据属性中附加一个唯一标识符

因此，如果您不想使用太多的
if和else
，也可以尝试这样做，尝试为国家提供数字id，如
id=1
，并为其状态提供相关的字符串连接id，如
id=state1

假设您的国家
select
有
id='1'
，您的州
select
有
id='state1'
，以此类推，其他国家的
select
，然后您可以使用以下代码段。注意，您只需在循环中使用字符串连接动态生成
id
，即可创建html元素

只需将每组包装在各自的容器中。然后，您可以为每个选择使用一个公共类

要获取关联的状态，请选择查找包装容器并查找（）位于包装容器内的状态选择类


$（'.country'）.change（函数（）{
const$stateSelect=$（this）.closest（'.group'）.find（'.state'）；
getStates（this.value）。然后（states=>{
$stateSelect.html（（）=>states.map（el=>newoption（el.txt，el.k））；
});
});
//模拟服务器请求异步方法
函数getStates（键）{
const states={us:[{k:“al”，txt:“阿拉巴马州”}，{k:“你好”，txt:“夏威夷州”}，{k:“ont”，txt:“安大略省”}，{k:“alb”，txt:“阿尔伯塔省”}；
返回承诺。解决（声明[关键]）；
}
.group{margin:02em 1em 2em；border:1px solid#ccc；padding:1em}

国家：
-选择国家
加拿大
美国
国家：
国家：
-选择国家
加拿大
美国
国家：
Hi，解决方案之一是触发选择更改。f、 e$（'select'）。在（'change'，function（this）{this.attr（'id'）；//用id或class做你的事情}）嗨，我不知道我怎么知道我的函数选择了哪个国家字段，目标是哪个州字段。我如何确保对
country1
的更改以
state1
为目标？@matthias检查更新的答案，希望它能帮助您，这就是我的问题所在。我不知道我会有多少个县。。因此，它可能是一份包含10个国家的清单。那我该怎么办？我很感谢你在这个解决方案中对几个问题的帮助
此
不是jQuery对象，但attr（）是jQuery方法
this.val
将是未定义的，
$（状态选择器）。val
是一个function@charlietfl谢谢你指出我现在犯的错误。非常有帮助。稍后将试用它，让您知道如何从ajax响应中获取值并返回调用方函数“$.ajax（{url:'/resources/states/'+key，type:'get'，datatype:'json'，）”），这样它就可以像您的
states
variable一样用于承诺中。我已经尝试了$stateSelect.html（（）=>Object.keys（states）.map（（k）=>新选项（states[k]，k）））；在.ajax查询中，但我希望能够像您在示例中所做的那样，拥有一个独立的函数来处理对服务器的调用。我只是在中通过它来展示它是如何工作的。我不知道您的数据是什么样子的。我的主要目标是回答所问的问题…如何隔离状态选择关联的wi这是我知道的一个具体的国家…但我只是请求更多的帮助。无论如何，谢谢
 $('select').on('change', function(){

     /* 
     for example you have different ids for different selects then you can 
     simply get the id of the current element to recognize it.
     */


   id = $(this).attr('id');// say if id=1 for country

// then get the respective state selector with 

 state = 'state'+id; // respective state selector identifier, state1
 stateSelector = "#"+state;

   $(stateSelector ).val();// example get the value of respective state or whatever.

});