javascript - 如何显示选定的文本而不是值

Question

您好，我有一段代码，我无法在第四个列表框中显示选定的文本而不是值。现在，它显示选项的值，但我想显示文本，即 Paper Manufacturers << Paper Converters << Molded Pulp Products.

$(document).ready(function() {
  var firstCategorySelector = '.select-manage-category';
  var secondCategorySelector = '.select-manage-category1';
  var thirdCategorySelector = '.select-manage-category2';
  var firstCategory = $(firstCategorySelector);
  var secondCategory = $(secondCategorySelector);
  var thirdCategory = $(thirdCategorySelector);
  var addCategoryButton = $("#add-category");
  var removeCategoryButton = $('#remove-category');
  var selectedList = $('#selected-lst-values');
  var choice = $("#tget");
  $('.select-manage-category, .select-manage-category1, .select-manage-category2').change(function() {
    AddCategoryButtonEnable();
  });

  function getCategoryValues() {
    var firstCategoryValue = firstCategory.val();
    var secondCategoryValue = secondCategory.val();
    var thirdCategoryValue = thirdCategory.val();
    return [firstCategoryValue, secondCategoryValue, thirdCategoryValue];
  }

  function isDisableAddButton() {
    var values = getCategoryValues();
    return (!values[0] || !values[1] || !values[2]);
  }

  function AddCategoryButtonEnable() {
    var isDisableAddCategoryButton = isDisableAddButton();
    addCategoryButton.prop("disabled", isDisableAddCategoryButton).toggleClass('text-bold', isDisableAddCategoryButton);
  }

  function getNumberOfSelectedOption() {
    return selectedList.find("option").length;
  }

  function getAvailableChoice() {
    return 20 - parseInt(getNumberOfSelectedOption());
  }

  function setAvailableChoice($numChoice) {
    var strText = ($numChoice !== 20) ? $numChoice + " more " : "up to 20 ";
      choice.text(strText);
  }

  function appendChoice() {
      var count="";
      var givenCategoryArrayValue = getCategoryValues();
      if ($('#selected-lst-values option:contains("' + givenCategoryArrayValue[0] + ' << ' + givenCategoryArrayValue[1] + ' << ' + givenCategoryArrayValue[2] + '")').length > 0) {alert('This category has already been added.');
      return count=1;
    }
      else {
        selectedList.append('<option value="'+ givenCategoryArrayValue[0] + ' << ' + givenCategoryArrayValue[1] + ' << ' + givenCategoryArrayValue[2] +'">' + givenCategoryArrayValue[0] + ' << ' + givenCategoryArrayValue[1] + ' << ' + givenCategoryArrayValue[2] + '</option>');
        return count=2;
             }
    }
  addCategoryButton.click(function() {
      var availableChoice = getAvailableChoice();
      if (availableChoice >= 1) {
        var a=appendChoice();
        if(a==2){
        setAvailableChoice(availableChoice - 1);
        }
      } else {
        setAvailableChoice(0);
      }
    });
    var option = selectedList.find('option:selected');
    selectedList.change(function() {
      removeCategoryButton.prop("disabled", false);
      addCategoryButton.prop("disabled", true);
      _addRemoveButtonClickListener();
    });

  function _addRemoveButtonClickListener() {
      removeCategoryButton.click(function() {
        selectedList.find('option:selected').remove();
        var availableChoice = getAvailableChoice();
        if (0 < availableChoice < 6) {
          setAvailableChoice(availableChoice);
        } else {
          setAvailableChoice(0);
        }
        removeCategoryButton.prop("disabled", true);
      });
    }
});

.select-manage-category,
.select-manage-category1,
.select-manage-category2 {
  width: 100px;
  float: left;
  margin-right: 4px;
}
p {
  clear: left;
  text-align: center;
}

#selected-lst-values {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select class="form-control select-manage-category" size="5">
    <option value="1">Paper Manufacturers</option>
    <option value="2">Paper Products Suppliers</option>
    <option value="3">Paper Chemicals Suppliers</option>
  </select>
</div>

<div>
  <select class="form-control select-manage-category1" size="5">
    <option value="1">Paper Converters</option>
    <option value="2">Lab Apparatus & Supplies</option>
    <option value="3">Service Providers</option>
  </select>
</div>
<div>
  <select class="form-control select-manage-category2" size="5">
    <option value="1">Molded Pulp Products</option>
    <option value="2">Software Vendors</option>
    <option value="3">Information Services</option>
  </select>
</div>
<p style="padding-top:10px;color:red;">You can add <span id="target">up to 5</span> categories</p>
</div>
<input id="add-category" name="add" type="button" value="Add Category" disabled="true">
<input id="remove-category" name="add" type="button" value="Remove Category" disabled="true">
<div>
  <select id="selected-lst-values" class="form-group percent-100" size="7" multiple="multiple">
  </select>
</div>
<button id="mnage-category-savebtn" class="btn btn-md btn-radius pi-btn prodetails-btn" type="button">
  <strong>Save Categories</strong>
  <span class="glyphicon glyphicon-menu-right right-arrow-head-icon"></span>
</button>

Answer 1

您应该将这些您想要获取的文本分配为每个选项的值:

$(document).ready(function() {
		var firstCategorySelector = '.select-manage-category';
	var secondCategorySelector = '.select-manage-category1';
	var thirdCategorySelector = '.select-manage-category2';
	var firstCategory = $(firstCategorySelector);
	var secondCategory = $(secondCategorySelector);
	var thirdCategory = $(thirdCategorySelector);
	var addCategoryButton = $("#add-category");
	var removeCategoryButton = $('#remove-category');
	var selectedList = $('#selected-lst-values');
	var choice = $("#tget");
	$('.select-manage-category, .select-manage-category1, .select-manage-category2').change(function() {
		AddCategoryButtonEnable();
	});

	function getCategoryValues() {
		var firstCategoryValue = firstCategory.val();
		var secondCategoryValue = secondCategory.val();
		var thirdCategoryValue = thirdCategory.val();
		return [firstCategoryValue, secondCategoryValue, thirdCategoryValue];
	}
  	function getCategoryDisplay() {
		var firstCategoryDisplay = $(firstCategorySelector+" option:selected").text();
		var secondCategoryDisplay = $(secondCategorySelector+" option:selected").text();
		var thirdCategoryDisplay = $(thirdCategorySelector+" option:selected").text();
		return [firstCategoryDisplay, secondCategoryDisplay, thirdCategoryDisplay];
	}

	function isDisableAddButton() {
		var values = getCategoryValues();
		return (!values[0] || !values[1] || !values[2]);
	}

	function AddCategoryButtonEnable() {
		var isDisableAddCategoryButton = isDisableAddButton();
		addCategoryButton.prop("disabled", isDisableAddCategoryButton).toggleClass('text-bold', isDisableAddCategoryButton);
	}

	function getNumberOfSelectedOption() {
		return selectedList.find("option").length;
	}

	function getAvailableChoice() {
		return 20 - parseInt(getNumberOfSelectedOption());
	}

	function setAvailableChoice($numChoice) {
		var strText = ($numChoice !== 20) ? $numChoice + " more " : "up to 20 ";
			choice.text(strText);
	}

	function appendChoice() {
			var count="";
			var givenCategoryArrayValue = getCategoryValues();
      var givenCategoryArrayDisplay = getCategoryDisplay();
			if ($('#selected-lst-values option:contains("' + givenCategoryArrayDisplay[0] + ' << ' + givenCategoryArrayDisplay[1] + ' << ' + givenCategoryArrayDisplay[2] + '")').length > 0) {alert('This category has already been added.');
			return count=1;
		}
			else {
				selectedList.append('<option value="'+ givenCategoryArrayValue[0] + ' << ' + givenCategoryArrayValue[1] + ' << ' + givenCategoryArrayValue[2] +'">' + givenCategoryArrayDisplay[0] + ' << ' + givenCategoryArrayDisplay[1] + ' << ' + givenCategoryArrayDisplay[2] + '</option>');
		    return count=2;
		         }
		}
	addCategoryButton.click(function() {
			var availableChoice = getAvailableChoice();
			if (availableChoice >= 1) {
				var a=appendChoice();
				if(a==2){
				setAvailableChoice(availableChoice - 1);
				}
			} else {
				setAvailableChoice(0);
			}
		});
		var option = selectedList.find('option:selected');
		selectedList.change(function() {
			removeCategoryButton.prop("disabled", false);
			addCategoryButton.prop("disabled", true);
			_addRemoveButtonClickListener();
		});

	function _addRemoveButtonClickListener() {
			removeCategoryButton.click(function() {
				selectedList.find('option:selected').remove();
				var availableChoice = getAvailableChoice();
				if (0 < availableChoice < 6) {
					setAvailableChoice(availableChoice);
				} else {
					setAvailableChoice(0);
				}
				removeCategoryButton.prop("disabled", true);
			});
		}
	});

.select-manage-category,
.select-manage-category1,
.select-manage-category2 {
  width: 100px;
  float: left;
  margin-right: 4px;
}

p {
  clear: left;
  text-align: center;
}

#selected-lst-values {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><select class="form-control select-manage-category" size="5">
		<option value="1">Paper Manufacturers</option>
		<option value="2">Paper Products Suppliers</option>
		<option value="3">Paper Chemicals Suppliers</option>
	</select></div>

	<div><select class="form-control select-manage-category1" size="5">
		<option value="1">Paper Converters</option>
		<option value="2">Lab Apparatus & Supplies</option>
		<option value="3">Service Providers</option>
	</select></div>
	<div><select class="form-control select-manage-category2" size="5">
		<option value="1">Molded Pulp Products</option>
		<option value="2">Software Vendors</option>
		<option value="3">Information Services</option>
	</select>
</div>
<p style="padding-top:10px;color:red;">You can add <span id="target">up to 5</span> categories</p>
</div>
<input id="add-category" name="add" type="button" value="Add Category" disabled="true">
<input id="remove-category" name="add" type="button" value="Remove Category" disabled="true">
<div><select id="selected-lst-values" class="form-group percent-100" size="7" multiple="multiple">
</select></div>
<button id="mnage-category-savebtn" class="btn btn-md btn-radius pi-btn prodetails-btn" type="button"><strong>Save Categories</strong> <span class="glyphicon glyphicon-menu-right right-arrow-head-icon"></span></button>

更新:定义了新函数 getCategoryDisplay 以根据您在下面评论中的预期输出获取所选选项的 text。