如何显示所选文本而不是值

时间：2017-03-27 09:07:29

标签： javascript html css

嗨我有一段代码＆amp;我无法在第四个列表框中显示所选文本而不是值。现在，它显示选项的值，但我想显示文本，即Paper Manufacturers＆lt;＆lt;纸转换器＆lt;＆lt;模塑纸浆产品。

$(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>

3 个答案:

答案 0 :(得分：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。

答案 1 :(得分：1)

很难说出您希望如何存储最终类别数据，但是您可以通过创建option函数来获取getCategoryNames来保存文本说明而不是数字并使用它代替getCategoryValues中的appendChoice：

function getCategoryNames() {
  return [].map.call(categories, function(e) {
    return $(':selected', e).text()
  })
}

为select提供.select-manage-category的公共类（不添加任何数字后缀）也是一个好主意，因为这简化了jQuery元素的选择：

var categories = $('.select-manage-category')

演示片段：

＆＃13;
＆＃13; 
$(document).ready(function() {
  var categories = $('.select-manage-category')
  var addCategoryButton = $("#add-category")
  var removeCategoryButton = $('#remove-category')
  var selectedList = $('#selected-lst-values')
  var choice = $("#tget")

  categories.change(AddCategoryButtonEnable)

  function getCategoryValues() {
    return [].map.call(categories, function(e) {
      return e.value
    })
  }

  function getCategoryNames() {
    return [].map.call(categories, function(e) {
      return $(':selected', e).text()
    })
  }

  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().join(' << ');
    if ($('#selected-lst-values option[value="' + givenCategoryArrayValue + '"]').length > 0) {
      alert('This category has already been added.');
      return count = 1;
    } else {
      selectedList.append(new Option(getCategoryNames().join(' << '), givenCategoryArrayValue));
      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(':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);
    });
  }
});
＆＃13; 
.select-manage-category {
  width: 100px;
  float: left;
  margin-right: 4px;
}

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

#selected-lst-values {
  width: 100%;
}
＆＃13; 
<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-category" size="5">
		<option value="1">Paper Converters</option>
		<option value="2">Lab Apparatus &amp; Supplies</option>
		<option value="3">Service Providers</option>
	</select></div>
<div><select class="form-control select-manage-category" 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>

<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

var firstCategoryValue = firstCategory.val();将返回所选值的数组。

要获取所选文本的数组

$('.select-manage-category :selected').each(function(i, v) {
  firstCategoryValue[i] = $(v).text();
});

更新了摘录：

＆＃13;
＆＃13; 
$(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 = [];
    var secondCategoryValue = [];
    var thirdCategoryValue = [];
    $('.select-manage-category :selected').each(function(i, v) {
      firstCategoryValue[i] = $(v).text();
    });
    $('.select-manage-category1 :selected').each(function(i, v) {
      secondCategoryValue[i] = $(v).text();
    });
    $('.select-manage-category2 :selected').each(function(i, v) {
      thirdCategoryValue[i] = $(v).text();
    });
    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].value + ' << ' + 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);
    });
  }
});
＆＃13; 
.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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题