如何使用jquery链接两个数组索引？ [英] How to link two array indices using jquery for each?

问题描述

在我的bootstrap模式中，我有一个textarea标记为options，另一个textarea标记为part number。在用户单击保存更改后，选项和部件号都是转换为数组并手动链接的对象（请参阅下面的if / else if语句）。



我想要选项1 /部分＃1，选项2 /部分＃2等。要链接，以便选项1的属性值为部件＃1。



请记住，这是一个使用jQuery拖放的formbuilder所以这样做而不创建重复的id对我来说是一个挑战。



请点击链接以获取项目的工作示例。 此处 [ ^ ]



如何创建一个循环，将Part＃分配给选项 动态属性值没有硬编码如下？



请帮忙！谢谢



我尝试过：

Inside my bootstrap modal I have one textarea labeled "options" and another textarea labeled "part number". Options and Part numbers are both objects that are converted into arrays and linked manually (see "if/else if" statement below) after the user clicks "Save Changes".

I would like "Option 1/Part#1", "Option 2/Part#2"etc. to be linked so that the attribute value of "Option 1" will be "Part#1".

Keep in mind this is a formbuilder using jQuery drag/drop so doing this while not creating duplicate id's has been a challenge for me.

Please click on the link for a working example of the project. Here[^]

How can I make a loop that will assign "Part#'s" to the "Option" attribute value dynamically without being hard-coded like below?

Please help! Thanks

What I have tried:

 	save_changes.combobox = function(values) {
		console.log(values);
		var div_ctrl = $("#" + values.forCtrl);
		var ctrl = div_ctrl.find("select")[0];
	    var optionCount = 1;
	    var partNumberCount = 1;

	    ctrl.value = values.value;

	/**
	* Clear the option(s) textarea and append the newly entered values
	**/

		$(ctrl).empty();
   
		$(values.options.split('\n')).each(function(i,o) {
      		$(ctrl).append("<option>" + $.trim(o) + "</option>");
		});

	/**
	* Clear the part number(s) textarea and append the newly entered values
	**/

    	$(ctrl).parent().find("select.group2").empty();

		$(values.value.split('\n')).each(function(i,o) {
			$(ctrl).parent().find("select.group2").append("<option>" + $.trim(o) + "</option>");
		});
 
	    //Objects containing the saved options and part numbers
	    var optionsObject = $(values.options.split('\n'));
	    var partsObject = $(values.value.split('\n'));
	    
	    //Conversion of the options Object to an array
	    var optionsArray = $.map(optionsObject, function(value, index) {
	      return [value];
	    });
	    //Conversion of the parts Object to an array
	    var partsArray = $.map(partsObject, function(value, index) {
	      return [value];
	    });
	    // console.log(partsArray);  
	    
	    var $create_combobox_id = div_ctrl.parent().find("select.ctrl-combobox");
	    var count = 1;
	    	$create_combobox_id.each(function() {
	    		var $foo = $(this);
	    		$foo.attr("id", count++);
	    	});

	    /* Assigning unique id's to the generated options */
	    var $individualOption = div_ctrl.find("option");        
	      $.each(partsArray, function($index, value) {
	          var partsIndex = $index;
	          // console.log(partsIndex);
	     });
	    $individualOption.each(function() {    
 
	      var $something = $(this);
	      if ($something.parent().is("select#1")) {	      
		      $something.attr('name', 'option' + optionCount++);
		      $something.attr('class', 'generatedOptions');
		      $('option[name="option1"]').attr('value', '(' + partsArray[0] + ')');
		      $('option[name="option2"]').attr('value', '(' + partsArray[1] + ')');
		      $('option[name="option3"]').attr('value', '(' + partsArray[2] + ')');
		      $('option[name="option4"]').attr('value', '(' + partsArray[3] + ')');
		      $('option[name="option5"]').attr('value', '(' + partsArray[4] + ')');
		      $('option[name="option6"]').attr('value', '(' + partsArray[5] + ')');
		      $('option[name="option7"]').attr('value', '(' + partsArray[6] + ')');
		      $('option[name="option8"]').attr('value', '(' + partsArray[7] + ')');
		      $('option[name="option9"]').attr('value', '(' + partsArray[8] + ')');
		      $('option[name="option10"]').attr('value', '(' + partsArray[9] + ')');
	      } else if ($something.parent().is("select#3")) {
		      $something.attr('name', 'option' + '-' + optionCount++);
		      $something.attr('class', 'generatedOptions');
		      $('option[name="option-1"]').attr('value', '(' + partsArray[0] + ')');
		      $('option[name="option-2"]').attr('value', '(' + partsArray[1] + ')');
		      $('option[name="option-3"]').attr('value', '(' + partsArray[2] + ')');
		      $('option[name="option-4"]').attr('value', '(' + partsArray[3] + ')');
		      $('option[name="option-5"]').attr('value', '(' + partsArray[4] + ')');
		      $('option[name="option-6"]').attr('value', '(' + partsArray[5] + ')');
		      $('option[name="option-7"]').attr('value', '(' + partsArray[6] + ')');
		      $('option[name="option-8"]').attr('value', '(' + partsArray[7] + ')');
		      $('option[name="option-9"]').attr('value', '(' + partsArray[8] + ')');
		      $('option[name="option-10"]').attr('value', '(' + partsArray[9] + ')');
	      }
      });
}

推荐答案

（ ＃ + values.forCtrl）;
var ctrl = div_ctrl.find（ 选择）[ 0 ];
var optionCount = 1 ;
var partNumberCount = 1 ;

ctrl.value = values.value;

/ * *
*清除选项textarea并追加新输入的值
** /

("#" + values.forCtrl); var ctrl = div_ctrl.find("select")[0]; var optionCount = 1; var partNumberCount = 1; ctrl.value = values.value; /** * Clear the option(s) textarea and append the newly entered values **/

（ctrl）.empty（）;

(ctrl).empty();

（values.options.split （' \ n'））。each（ function （i，o）{

(values.options.split('\n')).each(function(i,o) {

这篇关于如何使用jquery链接两个数组索引？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！