Question

因此，就像我有一个带有大约8个选项的选择框。单击每个特定选项时，将显示一个我称为“结果”的唯一文本。除了选择一个选项之后，两个选项都可以使用，效果很好和当前不需要的“结果”显示出来。

所以我的问题是如何创建一个select框，当选择每个选项时，它会显示一个唯一的“结果”，但是在此之后选择一个新选项时，以前的“结果”不会显示更多吗？

注意，我可以使用jQuery和Ajax（如果有关系的话）

另外，这是我的代码：

<?php
    $currentDir = getcwd();
    $uploadDirectory = "/uploads/";

    $errors = []; // Store all foreseen and unforseen errors here

    $fileExtensions = ['jpeg','jpg','png','mp4']; // Get all the file extensions

    $fileName = $_FILES['myfile']['name'];
    $fileSize = $_FILES['myfile']['size'];
    $fileTmpName  = $_FILES['myfile']['tmp_name'];
    $fileType = $_FILES['myfile']['type'];
    $fileExtension = strtolower(end(explode('.',$fileName)));

    $uploadPath = $currentDir . $uploadDirectory . basename($fileName); 

    if (isset($_POST['submit'])) {

        if (! in_array($fileExtension,$fileExtensions)) {
            $errors[] = "This file extension is not allowed. Please upload a JPEG or PNG file";
        }

        if ($fileSize > 1000000000) {
            $errors[] = "This file is more than 1GB. Sorry, it has to be less than or equal to 1GB";
        }

        if (empty($errors)) {
            $didUpload = move_uploaded_file($fileTmpName, $uploadPath);

            if ($didUpload) {
                echo   basename($fileName) ;
            } else {
                echo "An error occurred somewhere. Try again or contact the admin";
            }
        } else {
            foreach ($errors as $error) {
                echo $error . "These are the errors" . "\n";
            }
        }
    }


?>
<BR><BR>


<?PHP










?>

<?php $dates= date("Y-m-d")?>
<STYLE>

input:focus {
  box-shadow: none;
  padding:none
  margin: none
  border: none;
}

fieldset {
        border: 2px solid green;
    }

</STYLE>
<?php $file=$_POST['myfile']?>
<html>
<div style="white-space:nowrap;overflow:visible;display:inline-block">

<form  action="sqltransfer.php" method="POST" enctype="multipart/form-data">


<img src="<?php echo $fileName?>"><input style="border:none;border-bottom:2px solid green;position:relative; width:80%;" placeholder="Public title of file" maxlength="100" q="1"name="myfile"><br><br>
<textarea style="border:2px solid green;width:118%;HEIGHT:10%;position:relative;" placeholder="Brief information about it,descriptions and comments" type="text"maxlength="300" min="1"></textarea><br><br>
<input style="border:none;border-bottom:2px solid green;position:relative; width:100%;" placeholder="Tags to help people find your file more easily" maxlength="40" q="1"name="myfile"><br><br>
<!---language--->


<hr>


<form action="sqltransfer.php" method="POST">
<fieldset>
<legend><b>Category:</b></legend>

<select id="category" onchange="say()" name="category">

  <div style="box-shadow:0px 10px 19px 0px rgba(0,0,0,0.2)">
<option value="All types"style="background-color:#62ffff"><text style="background-color:orange;padding-bottom:2%">Other</text>
<option value="Video"style="background-color:#62ffff;"id='video'>Video</option>
<option value="Music"style="background-color:#62ffff"id='music'>Music</option>

<option value="ebook"style="background-color:#62ffff"id='ebook'>ebook</option>
<option value="Animation"style="background-color:#62ffff"id='animation'>Animation</option>
<option value="joke"style="background-color:#62ffff" id='joke'>joke</option>
<option value="software"style="background-color:#62ffff"id='software'>software</option>
<option value="image"style="background-color:#62ffff"id='image'>image</option>
<option value="gif"style="background-color:#62ffff"id='gif'>gif</option>
 <option value="document"style="background-color:#62ffff" id='document'>Document</option>

  <p id="demo"></p>

</select>






</fieldset>

<br><br.


<fieldset>
<legend><b>File settings</b></legend>
Allow comments <input type="checkbox"/>

<form action="sqltransfer.php" method="POST">
<p>Visibility</p>
<input type ="radio" name="visibility" value="Public">Public
<input type ="radio" name="visibility" value="Private">Private
<input type ="radio" name="visibility" value="Scheduled">Scheduled
<input type ="radio" name="visibility" value="Password protected">Password protected
</p>
<input type="submit" id="sub" >

Preferred age target<input>

<!---video--->
<text id="vid6">Captions/subtitles:</text> <input type="checkbox" id="myCheck"  onclick="myFunction()">

<p id="text" style="display:none">Source(caption)<input style="border:none;border-bottom:2px solid green;position:relative; width:100%;" placeholder="Subtitle  source" maxlength="40" name="sub">
<br>Source(subtitles)<input style="border:none;border-bottom:2px solid green;position:relative; width:100%;" placeholder="Caption  source" maxlength="40" name="sub">
</P>


<!---music--->

<span style="display:none" id="mus">Lyrics available<input type="checkbox" id="myCheck1"  onclick="myFunction1()">

Source:<span style="display:none" id="text1"><input style="border:none;border-bottom:2px solid green;position:relative; width:100%;" placeholder="Lyrics  sorce" maxlength="40" name="sub"><br><br>
Type *optional*<!---all types of music!--->
</span>
</span>

</form>
</fieldset>
</div>

</form>
<hr>




<fieldset>
<b>
<legend>
<fieldset>
<legend>General info:</legend>
</legend>
</b><br>


Current date:<?php echo $dates?><br>
File name:<?php echo $fileName?><br>
File size:<?php echo $fileSize?><br>
File type:<?php echo $fileType?><br>
File path:<?php echo     $fileTmpName?><br>
Producer:<?php echo     $fileTmpName?><br>
<!--video,gif and music--->
<text id="vid1" style="display:none">Duration:</text>
<text id="vid2" style="display:none">Loudness:</text>
<!---ebook and documents and jokes--->
<text id="book1" style="display:none">No of characters:</text>
<text id="book2" style="display:none">No of words:</text>
<!---images and gif--->
<text id="pic1" style="display:none">Width:</text>
<text id="pic2" style="display:none">Height:</text>




</fieldset>
</span>

</form>
</form>
</div>
</fieldset>

<button style="background-color:blue;color:white;height:8%"value="Upload now" onclick="sub()"><font size="6%">Upload now</button>&nbsp;&nbsp;&nbsp;&nbsp;<button style="background-color:teal;color:white;height:8%"value="Save for later"><font size="6%">Save for later</button>&nbsp;&nbsp;&nbsp;<button style="background-color:red;color:white;height:8%"value="Discard"><font size="6%">Discard</button></font>
<p id="i" style="display:none"></p>




<script>

function say(){
var c=document.getElementById('category').value
 document.getElementById("i").innerHTML=c;





var v=document.getElementById('video').innerHTML
var m=document.getElementById('music').innerHTML
var eb=document.getElementById('ebook').innerHTML
var a=document.getElementById('animation').innerHTML
var j=document.getElementById('joke').innerHTML
var s=document.getElementById('software').innerHTML
var i=document.getElementById('image').innerHTML
var g=document.getElementById('gif').innerHTML
var d=document.getElementById('document').innerHTML

if (c==v){
    vid();
    function vid(){
document.getElementById("vid1").style.display="block";
document.getElementById("vid2").style.display="block";
document.getElementById("vid4").style.display="block";
document.getElementById("vid5").style.display="block";
document.getElementById("vid6").style.display="block";

document.getElementById("mus").style.display="none";
document.getElementById("book1").style.display="none";
document.getElementById("book2").style.display="none";
document.getElementById("pic1").style.display="none";
document.getElementById("pic2").style.display="none";



    }
}


else if (c==m){

document.getElementById("mus").style.display="block";




}


else if (c==eb){
document.getElementById("book1").style.display="block";
document.getElementById("book2").style.display="block";

document.getElementById("mus").style.display="block";


document.getElementById("vid1").style.display="none";
document.getElementById("vid2").style.display="none";
document.getElementById("vid4").style.display="none";
document.getElementById("vid5").style.display="none";
document.getElementById("vid6").style.display="none";

}


else if (c==a){

document.getElementById("vid1").style.display="block";
document.getElementById("vid2").style.display="block";
document.getElementById("vid4").style.display="block";
document.getElementById("vid5").style.display="block";
}



else if (c==j){
document.getElementById("book1").style.display="block";
document.getElementById("book2").style.display="block";
}


else if (c==s){
alert("5");
}


else if (c==i){
document.getElementById("pic1").style.display="block";
document.getElementById("pic2").style.display="block";

}


else if (c==g){
document.getElementById("vid1").style.display="block";
document.getElementById("vid2").style.display="block";
document.getElementById("pic1").style.display="block";
document.getElementById("pic2").style.display="block";


}


else{
document.getElementById("book1").style.display="block";
document.getElementById("book2").style.display="block";
}
}


function myFunction() {
    var checkBox = document.getElementById("myCheck");
    var text = document.getElementById("text");
    if (checkBox.checked == true){
        text.style.display = "block";
    } else {
       text.style.display = "none";
    }
}


function myFunction1() {
    var checkBox = document.getElementById("myCheck1");
    var text = document.getElementById("text1");
    if (checkBox.checked == true){
        text.style.display = "block";
    } else {
       text.style.display = "none";
    }
}



</script>

</html>

Answer 1

say()函数内部的逻辑是什么？有时您显示一些方块并隐藏其他一些方块，有时您只显示其中的两个方块，而使其他方块保持先前的状态...

我用笔在其中隐藏了除设置为阻止的那些笔以外的所有其他笔： https://codepen.io/rezaxdi/pen/WKQdPO

这是您想要的吗？

Answer 2

我认为您只需在更新之前清除该框即可

for gene in $(awk '{print $2}' myfile.txt | uniq); do
    grep "$(awk -v gene=$gene '$2 == gene {print $0}' myfile.txt | head -1)" myfile.txt
done

编辑尝试更改为无和隐藏

function myFunction() {
    var checkBox = document.getElementById("myCheck1");

    //clear text
    document.getElementById("text1").value=""

    var text = document.getElementById("text1");
    if (checkBox.checked == true){
        text.style.display = "block";
    } else {
       text.style.display = "none";
    }
}

然后将它们显示为可见并屏蔽

document.getElementById("mus").style.display="none";
document.getElementById("mus").style.visibility = "hidden";

Javascript：仍显示以前的结果

2 个答案: