Question

美好的一天！

我想在修复此HTML代码方面获得一些帮助。将有10个下拉列表项，例如，如果选择了项1，则在下面的代码中，将在文本框中查看项代码详细信息。

然而，我真的很喜欢这个东西，文本框的细节很小，细节将在段落中。

由于

＆＃13;

<html>

<head>
</head>
<script type="text/javascript">
  function showdv(obj, id1, id2) {
    txt = obj.options[obj.selectedIndex].text;
    document.getElementById("box").style.display = 'none';
    if (txt.match(id1)) {
      document.getElementById("box").style.display = 'block';
      document.getElementById("boxx").value = txt
    }
    if (txt.match(id2)) {
      document.getElementById("box").style.display = 'block';
      document.getElementById("boxx").value = txt
    }
  }
</script>

<body>
  <thead>
    <select id="opts" onchange="showdv(this,'one','two');">
      <option value="">select</option>
      <option value="one">Item one</option>
      <option value="two">Item two</option>
    </select>
  </thead>
  <div id="box" style="display:none;">
    <input Type="textbox" id="boxx" maxlength="100">
  </div>
</body>

</html>

＆＃13;

Answer 1

您可以使用<div>或<p>来展示您的内容。请查看以下示例。

＆＃13;

<html>

<head>
</head>
<script type="text/javascript">
  function showdv(obj, id1, id2) {

    var txt = ["Item 1 description: On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your documentOn the Insert tab, the galleries include items that are designed to coordinate with the overall look of your documentOn the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document",
      "Item 2 Description : Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna."
    ];


    var i = obj.selectedIndex;
    document.getElementById("box").style.display = 'none';
    switch (i) {
      case 1:
        document.getElementById("box").style.display = 'block';
        document.getElementById("box").innerHTML = txt[i - 1];
        break;
      case 2:
        document.getElementById("box").style.display = 'block';
        document.getElementById("box").innerHTML = txt[i - 1];
        break;
    }
  }
</script>

<body>
  <thead>
    <select id="opts" onchange="showdv(this,'one','two');">
      <option value="">select</option>
      <option value="one">Item one</option>
      <option value="two">Item two</option>
    </select>
  </thead>
  <div id="box" style="display:none;">
  </div>
</body>

</html>

＆＃13;

Answer 2

不发送ID。

function showdv(obj) {
    var i = obj.selectedIndex;
    document.getElementById("box").style.display = 'none';
    if (i > 0) {
        document.getElementById("box").style.display = 'block';
        document.getElementById("box").innerHTML = document.getElementById("container"+i).innerHTML;        
    }
  }

  <thead>
    <select id="opts" onchange="showdv(this);">
      <option value="">select</option>
      <option value="one">Item one</option>
      <option value="two">Item two</option>
    </select>
  </thead>
  <div id="box" style="display:none;">
  </div>
<div id="container1" style="display:none;">
  Item 1 description: On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your documentOn the Insert tab, the galleries include items that are designed to coordinate with the overall look of your documentOn the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document </div>

<div id="container2" style="display:none;">
  "Item 2 Description : Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna." </div>

Answer 3

我认为你在问的是，

如何在下拉列表中显示所选项目文字框？

如果是这样，你需要从下拉菜单中对当前选中的项目进行处理。然后根据从下拉列表中获得的值填充文本框内的文本（如果您正在调用服务器，通常它将是值/ id或过滤条件）

//sample data that you might be pulling from a database Ajax/get
var phoneDetails = [{
  id: 0,
  name: "LG",
  price: 344.99
}, {
  id: 1,
  name: "IPhone",
  price: 9000.00
}, {
  id: 2,
  name: "BlackBerry",
  price: 3.99
}];

function populateDetails() {

  //get new value of the drop down
  var phoneID = document.getElementById("ddItem").value;
  var txtInputHandler = document.getElementById("txtItemDetails");
  var txtboxDetails = document.getElementById("tbItemDetails");


  //has to be async function so we  don't get undefiend.
  getPhoneDetails(phoneID, function(details) {

    //set the value of our items after the function has completed
    txtInputHandler.value = details.price;
    txtboxDetails.value = details.price;
  });
}

//get our data based on id
function getPhoneDetails(id, callback) {
  phoneDetails.forEach(function(item) {
    if (id == item.id) {
      callback(item);
    }
  });
}

<select onchange="populateDetails()" id="ddItem">
  <option disabeled selected>-- select a value --</option>
  <option value="0">LG</option>
  <option value="1">IPhone</option>
  <option value="2">BlackBerry</option>
</select>

<hr />

<input id="txtItemDetails" type="text" />
<!--there is no such thing as type="textbox" -->

<!-- what I think you wanted to do -->
<textbox id="tbItemDetails">
  </textbox>

查看下拉菜单HTML代码的详细信息

3 个答案: