Question

这是我的jsfiddle：

我想要的最终结果是，一旦您从每个下拉列表中进行了选择，该选择就会出现在文本的第一行，然后在文本的第二行反转。但是，撇号S需要保留在第一位。因此，例如，如果您从第一个下拉列表中选择了“母亲”，而从第二个下拉列表中选择了“父亲”，则两行文本应如下所示：

我母亲的父亲
我父亲的母亲

我不知道如何交换撇号S以便保留它，以便它先出现。

我尝试使用：

document.getElementById('third').innerHTML = strUser2 + "'s";

但是导致撇号出现在我选择任何内容之前。

Answer 1

这是因为在选择之前要运行两个功能。删除它们，然后尝试。

function functionOne() {
  var e = document.getElementById("dropdown_1");
  var strUser = e.options[e.selectedIndex].value;
  document.getElementById('first').innerHTML = strUser;
  document.getElementById('fourth').innerHTML = strUser.replace("'s", '');
}
document.getElementById("dropdown_1").onchange = functionOne;

function functionTwo() {

  var e = document.getElementById("dropdown_2");
  var strUser = e.options[e.selectedIndex].value;
  var strUser2 = e.options[e.selectedIndex].value;

  document.getElementById('second').innerHTML = strUser;
  document.getElementById('third').innerHTML = strUser2+ "'s";
}

document.getElementById("dropdown_2").onchange = functionTwo;

span#first,
span#second,
span#third,
span#fourth {
  min-width: 40px;
  display: inline-block;
  border-bottom: solid 1px;
  height: 18px;
  vertical-align: bottom;
}

<select class="text_select" id="dropdown_1" name="dropdown_1">    
			<option value="">- Select -</option>  
			<option value="Father's">Father's</option>  
			<option value="Mother's">Mother's</option>  
			<option value="Sister's">Sister's</option>
			<option value="Brother's">Brother's</option>  

			</select>

<select class="text_select" id="dropdown_2" name="dropdown_2">    
			<option value="">- Select -</option>  
			<option value="Father">Father</option>  
			<option value="Mother">Mother</option>  
			<option value="Sister">Sister</option>
			<option value="Brother">Brother</option>  
			</select>

<br /><br />
<label class="row_1">My <span id="first"></span> <span id="second"></span></label>
<br />
<label class="row_2">My <span id="third"></span> <span id="fourth"></span></label>

Answer 2

我将更改option标记中的值，但保持相同的显示。例如：<option value="Father">Father's</option> 然后在要拥有's的值之后附加's。

默认情况下，也不执行每个功能，仅执行 onchange。这样一来，页面加载时就不会得到类似's这样的信息。

然后，我将确保- Select -是两个selected标签的第一个选项（option），但是将它们设为disabled，以便用户无法选择它们作为选项。

-注意-

强烈建议您像textContent一样使用innerHTML，以避免可能的代码注入，具体取决于您将其用于什么。

function functionOne(){
			var e = document.getElementById("dropdown_1");
			var strUser = e.options[e.selectedIndex].value;
			document.getElementById('first').textContent = strUser + "'s";
			document.getElementById('fourth').textContent = strUser;
			}
			    document.getElementById("dropdown_1").onchange = functionOne;

			function functionTwo(){

			var e = document.getElementById("dropdown_2");
			var strUser = e.options[e.selectedIndex].value;
			var strUser2 = e.options[e.selectedIndex].value;
			
			document.getElementById('second').textContent = strUser;
			document.getElementById('third').textContent = strUser2 + "'s";
			}
    
			    document.getElementById("dropdown_2").onchange = functionTwo;

span#first, span#second, span#third, span#fourth{
  min-width:40px;
  display:inline-block;
  border-bottom:solid 1px;
  height:18px;
  vertical-align:bottom;
}

<select class="text_select" id="dropdown_1" name="dropdown_1">    
			<option value="" disabled selected>- Select -</option>  
			<option value="Father">Father's</option>  
			<option value="Mother">Mother's</option>  
			<option value="Sister">Sister's</option>
			<option value="Brother">Brother's</option>  

			</select>

			<select class="text_select" id="dropdown_2" name="dropdown_2">    
			<option value="" disabled selected>- Select -</option>  
			<option value="Father">Father</option>  
			<option value="Mother">Mother</option>  
			<option value="Sister">Sister</option>
			<option value="Brother">Brother</option>  
			</select>

			<br /><br />
			<label class="row_1">My <span id="first"></span> <span id="second"></span></label>
			<br />
			<label class="row_2">My <span id="third"></span> <span id="fourth"></span></label>

Answer 3

简单的解决方案：

从列表值中删除撇号并仅在定义时添加字符串：

rocker/shiny

提琴here

编辑-新解决方案：

完全代码解决方案，可根据要求阻止填充两行，直到选择了两个下拉菜单：

document.getElementById('first').innerHTML = strUser+(strUser ? "'s" : "");
document.getElementById('third').innerHTML = strUser2+(strUser2 ? "'s" : "");

var firstSelect = false;
       var secondSelect = false;
       var dd1 = document.getElementById("dropdown_1");
       var dd2 = document.getElementById("dropdown_2");
    
    	function clearAllContainers(){
          	document.getElementById('first').innerHTML = '';
          	document.getElementById('second').innerHTML = '';
          	document.getElementById('third').innerHTML = '';
          	document.getElementById('fourth').innerHTML = '';
          }
    
    			function updateAllContainers(){
            		var strUser = dd1.options[dd1.selectedIndex].value;
              	document.getElementById('first').innerHTML = strUser+(strUser ? "'s" : "");
              	document.getElementById('fourth').innerHTML = strUser; 
                
              	var strUser2 = dd2.options[dd2.selectedIndex].value;
              	document.getElementById('second').innerHTML = strUser2;
              	document.getElementById('third').innerHTML = strUser2+(strUser2 ? "'s" : "");
                
          }
    
    			function functionOne(){
              if(dd1.options[dd1.selectedIndex].value){
              	firstSelect = true;
              }else{
              	firstSelect = false;
              }
              if(secondSelect && dd1.options[dd1.selectedIndex].value != ''){
    						updateAllContainers();
              }else{
              	clearAllContainers();
              }
    
          }
    			functionOne()
    			    document.getElementById("dropdown_1").onchange = functionOne;
    
    			function functionTwo(){
              if(dd2.options[dd2.selectedIndex].value){
              	secondSelect = true;
              }else{
              	secondSelect = false;
              }
              if(firstSelect && dd2.options[dd2.selectedIndex].value != ''){
    						updateAllContainers();
              }else{
              	clearAllContainers();
              }
          }
    			functionTwo()
        
    			    document.getElementById("dropdown_2").onchange = functionTwo;

最终解决方案的更新小提琴是here。

Answer 4

我在JSFiddle上查看了您的Javascript文件。解决方案非常简单。首先，您必须从<span id="fourth"></span>

的内容中删除撇号

您可以轻松地做到这一点，只需从该跨度的内容中切出最后两个字符即可。这是您需要执行的操作。

document.getElementById('fourth').innerHTML = strUser.slice(0, strUser.length - 2);

现在，下一步是在<span id="third"></span>的内容中添加撇号。

但是您必须确保，如果跨度的内容为空，则不应添加撇号。

为此，您可以检查内容是否不为空，如果不为空，则可以附加撇号。

这是您的操作方式。

document.getElementById('third').innerHTML = (strUser)? strUser + '\'s':strUser;

这是Javascript文件的整体修改代码。

function functionOne(){
            var e = document.getElementById("dropdown_1");
            var strUser = e.options[e.selectedIndex].value;    
            document.getElementById('first').innerHTML = strUser;
            document.getElementById('fourth').innerHTML = strUser.slice(0, strUser.length - 2);
            }
            functionOne();
                document.getElementById("dropdown_1").onchange = functionOne;

            function functionTwo(){

            var e = document.getElementById("dropdown_2");
            var strUser = e.options[e.selectedIndex].value;
            //var strUser2 = e.options[e.selectedIndex].value;

            document.getElementById('second').innerHTML = strUser;
            document.getElementById('third').innerHTML = (strUser)? strUser + '\'s':strUser;
            }
            functionTwo()

                document.getElementById("dropdown_2").onchange = functionTwo;

向下拉列表中填充的范围添加和删除文本

4 个答案: