在条件隐藏的条件下的JavaScript条件

我有2个字段（选择社交网络和键入usersocial网络）条件与js所以当人们选择“其他”一个新的领域出现，我有一个按钮来添加其他额外的领域来选择另一个社交网络，一切工作完美，但我不能让工作第二个条件的选项“其他” 我感谢您的帮助。在条件隐藏的条件下的JavaScript条件

function otherps() { 
 
    if ($("#platform_social").val() !== '') { 
 
    $("#social_user").prop('disabled', false); 
 
    $("#social_user").prop('required', true); 
 
    } else { 
 
    $("#social_user").prop('disabled', true); 
 
    $("#social_user").prop('required', false); 
 
    } 
 
    if ($("#platform_social").val() == "Other") { 
 
    $("#othersocial").css("display", "block"); 
 
    $("#otherplatform").prop('required', true); 
 
    //$("input").prop('required',true); 
 
    } else { 
 
    $("#otherplatform").val(""); 
 
    $("#otherplatform").prop('required', false); 
 
    $("#othersocial").css("display", "none"); 
 
    } 
 
} 
 

 
//more social 
 
function add_social() { 
 
    var crd = $("#socialadded").val(); 
 
    var newblock = '<br><div class="headline">Other Social Media </div>'; 
 
    newblock += '<div class="fullrow" id="alremove' + crd + '">'; 
 
    newblock += '<div class="leftcol">'; 
 
    newblock += 'Provider/Platform:'; 
 
    newblock += '<select name="platform_social' + crd + '" id="platform_social' + crd + '">'; 
 
    newblock += '<option value="" selected="selected">&nbsp;</option>'; 
 
    newblock += '<option value="ASKfm">ASKfm</option>'; 
 
    newblock += '<option value="Facebook">Facebook</option>'; 
 
    newblock += '<option value="Flickr">Flickr</option>'; 
 
    newblock += '<option value="GitHub">GitHub</option>'; 
 
    newblock += '<option value="Google">Google+</option>'; 
 
    newblock += '<option value="Instagram">Instagram</option>'; 
 
    newblock += '<option value="JustPaste">JustPaste.it</option>'; 
 
    newblock += '<option value="LinkedIn">LinkedIn</option>'; 
 
    newblock += '<option value="Tumblr">Tumblr</option>'; 
 
    newblock += '<option value="Twitter">Twitter</option>'; 
 
    newblock += '<option value="Vine">Vine</option>'; 
 
    newblock += '<option value="VKontakte">VKontakte (VK)</option>'; 
 
    newblock += '<option value="YouTube">YouTube</option>'; 
 
    newblock += '<option value="Other">Other</option>'; 
 
    newblock += '</select>'; 
 
    newblock += '<div id="othersocial' + crd + '" style="display:none;">'; 
 
    newblock += '<br>'; 
 
    newblock += '<div>Other Platform/Provider *</div>'; 
 
    newblock += '<input type="text" name="otherplatform' + crd + '" id="otherplatform' + crd + '" /><br>'; 
 
    newblock += '</div>'; 
 
    newblock += '</div>'; 
 
    newblock += '<br>'; 
 
    newblock += '<div class="rightcol">'; 
 
    newblock += 'Social Media Identifier:'; 
 
    newblock += '<input type="text" name="social_user' + crd + '" id="social_user' + crd + '" disabled />'; 
 
    newblock += '</div>'; 
 
    newblock += '</div>'; 
 

 

 
    $("#socialextra").append(newblock); 
 
    var whichplatform_social = "#platform_social" + crd; 
 
    var whichsocial_usere = "#social_user" + crd; 
 
    var whichotherplatform = "#otherplatform" + crd; 
 
    var whichothersocial = "#othersocial" + crd; 
 
    $(whichplatform_social).prop('required', true); 
 
    $(whichsocial_user).prop('required', true); 
 
    $(whichotherplatform).prop('required', true); 
 
    $(whichothersocial).css('display', 'block'); 
 
    if ($whichotherplatform !== '') { 
 
    $whichsocial_usere.prop('disabled', false); 
 
    $whichsocial_usere.prop('required', true); 
 
    } else { 
 
    $whichsocial_usere.prop('disabled', true); 
 
    $whichsocial_usere.prop('required', false); 
 
    } 
 
    if (whichotherplatform == "Other") { 
 
    $whichothersocial.css("display", "block"); 
 
    $whichotherplatform.prop('required', true); 
 
    //$("input").prop('required',true); 
 
    } else { 
 
    $whichotherplatform.val(""); 
 
    $whichotherplatform.prop('required', false); 
 
    $whichothersocial.css("display", "none"); 
 
    } 
 
    crd++; 
 
    $("#socialadded").val(crd); 
 
}

<div class="fullrow"> 
 
    <div class="leftcol"> 
 
    <div>Provider/Platform</div> 
 
    <select name="platform_social" id="platform_social" onchange="otherps();"> 
 
    <option value="" selected="selected">&nbsp;</option> 
 
\t <option value="ASKfm">ASKfm</option> 
 
\t <option value="Facebook">Facebook</option> 
 
\t <option value="Flickr">Flickr</option> 
 
\t <option value="GitHub">GitHub</option> 
 
\t <option value="Google">Google+</option> 
 
\t <option value="Instagram">Instagram</option> 
 
\t <option value="JustPaste">JustPaste.it</option> 
 
\t <option value="LinkedIn">LinkedIn</option> 
 
\t <option value="Tumblr">Tumblr</option> 
 
\t <option value="Twitter">Twitter</option> 
 
\t <option value="Vine">Vine</option> 
 
\t <option value="VKontakte">VKontakte (VK)</option> 
 
\t <option value="YouTube">YouTube</option> 
 
\t <option value="Other">Other</option> 
 
    </select> 
 
    <div id="othersocial" style="display:none;"> 
 
     <br> 
 
     <div>Other Platform </div> 
 
     <input type="text" name="otherplatform" id="otherplatform" /><br> 
 
    </div> 
 
    </div> 
 

 
    <div class="rightcol"> 
 
    <div>Social Media Identifier</div> 
 
    <input type="text" id="social_user" name="social_user" disabled /> 
 
    </div> 
 
</div> 
 

 
<div id="socialextra"></div> 
 

 
<input type="hidden" name="socialadded" id="socialadded" value="0" /> 
 
<br> 
 
<div class="fullrow"> 
 
    <div class="leftcol"> 
 
    <span class="addtravel"><a onclick="add_social()" 
 
    class="button medium dark">Add Another</a>&nbsp;&nbsp;</span> 
 
    </div> 
 
</div>

一切完美，直到我试图添加条件的额外的社交网络。

非常感谢

来源

2017-07-03 Andrés Pérez

你想在哪里添加新添加的社交网络到上一个select元素？ –

如果这是你正在使用的代码，那么js文件中就会缺少大括号。你没有关闭添加社交功能。 –

嗨@HarshanaNarangoda它很接近，抱歉，我错过了当我复制代码，但它已关闭，现在正在这样工作，您选择一个社交网络，并在“社交媒体标识符”字段中键入用户，如果您选择“其他”然后出现一个新的字段键入“其他”社交网络的名称， –

检查片段

function otherps(val) { 
 
    if ($("#platform_social"+ val).val() !== '') { 
 
    $("#social_user"+ val).prop('disabled', false); 
 
    $("#social_user"+ val).prop('required', true); 
 
    } else { 
 
    $("#social_user" + val).prop('disabled', true); 
 
    $("#social_user" + val).prop('required', false); 
 
    } 
 
    if ($("#platform_social" + val).val() == "Other") { 
 
    $("#othersocial" + val).css("display", "block"); 
 
    $("#otherplatform" + val).prop('required', true); 
 
    //$("input").prop('required',true); 
 
    } else { 
 
    $("#otherplatform" + val).val(""); 
 
    $("#otherplatform" + val).prop('required', false); 
 
    $("#othersocial" + val).css("display", "none"); 
 
    } 
 
} 
 

 
//more social 
 
function add_social() { 
 
    var crd = $("#socialadded").val(); 
 
    var newblock = '<br><div class="headline">Other Social Media </div>'; 
 
    newblock += '<div class="fullrow" id="alremove' + crd + '">'; 
 
    newblock += '<div class="leftcol">'; 
 
    newblock += 'Provider/Platform:'; 
 
    newblock += '<select name="platform_social' + crd + '" id="platform_social' + crd + '" onchange="otherps("+crd+")>'; 
 
    newblock += '<option value="" selected="selected">&nbsp;</option>'; 
 
    newblock += '<option value="ASKfm">ASKfm</option>'; 
 
    newblock += '<option value="Facebook">Facebook</option>'; 
 
    newblock += '<option value="Flickr">Flickr</option>'; 
 
    newblock += '<option value="GitHub">GitHub</option>'; 
 
    newblock += '<option value="Google">Google+</option>'; 
 
    newblock += '<option value="Instagram">Instagram</option>'; 
 
    newblock += '<option value="JustPaste">JustPaste.it</option>'; 
 
    newblock += '<option value="LinkedIn">LinkedIn</option>'; 
 
    newblock += '<option value="Tumblr">Tumblr</option>'; 
 
    newblock += '<option value="Twitter">Twitter</option>'; 
 
    newblock += '<option value="Vine">Vine</option>'; 
 
    newblock += '<option value="VKontakte">VKontakte (VK)</option>'; 
 
    newblock += '<option value="YouTube">YouTube</option>'; 
 
    newblock += '<option value="Other">Other</option>'; 
 
    newblock += '</select>'; 
 
    newblock += '<div id="othersocial' + crd + '" style="display:none;">'; 
 
    newblock += '<br>'; 
 
    newblock += '<div>Other Platform/Provider *</div>'; 
 
    newblock += '<input type="text" name="otherplatform' + crd + '" id="otherplatform' + crd + '" /><br>'; 
 
    newblock += '</div>'; 
 
    newblock += '</div>'; 
 
    newblock += '<br>'; 
 
    newblock += '<div class="rightcol">'; 
 
    newblock += 'Social Media Identifier:'; 
 
    newblock += '<input type="text" name="social_user' + crd + '" id="social_user' + crd + '" disabled />'; 
 
    newblock += '</div>'; 
 
    newblock += '</div>'; 
 

 

 
    $("#socialextra").append(newblock); 
 
    var whichplatform_social = "#platform_social" + crd; 
 
    var whichsocial_usere = "#social_user" + crd; 
 
    var whichotherplatform = "#otherplatform" + crd; 
 
    var whichothersocial = "#othersocial" + crd; 
 
    $(whichplatform_social).prop('required', true); 
 
    $(whichsocial_user).prop('required', true); 
 
    $(whichotherplatform).prop('required', true); 
 
    $(whichothersocial).css('display', 'block'); 
 
    if ($whichotherplatform !== '') { 
 
    $whichsocial_usere.prop('disabled', false); 
 
    $whichsocial_usere.prop('required', true); 
 
    } else { 
 
    $whichsocial_usere.prop('disabled', true); 
 
    $whichsocial_usere.prop('required', false); 
 
    } 
 
    if (whichotherplatform == "Other") { 
 
    $whichothersocial.css("display", "block"); 
 
    $whichotherplatform.prop('required', true); 
 
    //$("input").prop('required',true); 
 
    } else { 
 
    $whichotherplatform.val(""); 
 
    $whichotherplatform.prop('required', false); 
 
    $whichothersocial.css("display", "none"); 
 
    } 
 
    crd++; 
 
    $("#socialadded").val(crd); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    
 
    <div class="fullrow"> 
 
    <div class="leftcol"> 
 
    <div>Provider/Platform</div> 
 
    <select name="platform_social" id="platform_social" onchange="otherps('');"> 
 
    <option value="" selected="selected">&nbsp;</option> 
 
\t <option value="ASKfm">ASKfm</option> 
 
\t <option value="Facebook">Facebook</option> 
 
\t <option value="Flickr">Flickr</option> 
 
\t <option value="GitHub">GitHub</option> 
 
\t <option value="Google">Google+</option> 
 
\t <option value="Instagram">Instagram</option> 
 
\t <option value="JustPaste">JustPaste.it</option> 
 
\t <option value="LinkedIn">LinkedIn</option> 
 
\t <option value="Tumblr">Tumblr</option> 
 
\t <option value="Twitter">Twitter</option> 
 
\t <option value="Vine">Vine</option> 
 
\t <option value="VKontakte">VKontakte (VK)</option> 
 
\t <option value="YouTube">YouTube</option> 
 
\t <option value="Other">Other</option> 
 
    </select> 
 
    <div id="othersocial" style="display:none;"> 
 
     <br> 
 
     <div>Other Platform </div> 
 
     <input type="text" name="otherplatform" id="otherplatform" /><br> 
 
    </div> 
 
    </div> 
 

 
    <div class="rightcol"> 
 
    <div>Social Media Identifier</div> 
 
    <input type="text" id="social_user" name="social_user" disabled /> 
 
    </div> 
 
</div> 
 

 
<div id="socialextra"></div> 
 

 
<input type="hidden" name="socialadded" id="socialadded" value="0" /> 
 
<br> 
 
<div class="fullrow"> 
 
    <div class="leftcol"> 
 
    <span class="addtravel"><a onclick="add_social()" 
 
    class="button medium dark">Add Another</a>&nbsp;&nbsp;</span> 
 
    </div> 
 
</div> 
 
    
 
    </body> 
 

 
</html>

而且这里是工作plunker。 Plunker

解我添加了一个参数的“otherps”功能，然后解析该CRD到功能时的动态HTML生成。

来源

2017-07-04 04:51:49

在条件隐藏的条件下的JavaScript条件

回答

相关问题