2017-08-25 196 views
-1

說實話,我從未在今天之前觸及Javascript。在基本搜索中,我看到一些腳本使用了更改功能,但樣本看起來非常具體(使用.indexOf,更改的數字/文本框在此不適用)。根據下拉選項選擇下拉選項

jsfiddle.net/701s3dgp/

您可以忽略的存在的代碼。基本上我在尋找的是1(疾病)變爲是時,6選項變爲患者,如果6(poster_type)值=患者,則選擇7作爲是。

如果有人能通過改變函數來引導我,那也可以。

$('select>option[value="Neutral"]').prop('selected', true); 
 
$('select>option[value="No"]').prop('selected', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html><html><head><title>HIT</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><script type='text/javascript' src='https://s3.amazonaws.com/mturk-public/externalHIT_v1.js'></script></head><body><form name="mturk_form" method="post" id="mturk_form" action="https://www.mturk.com/mturk/externalSubmit"><input type="hidden" value="" name="assignmentId" id="assignmentId" /><style type="text/css">.surveyLabel { 
 
\t font-family: Georgia, Garamond, serif; 
 
\t font-size: 16px; 
 
\t line-height: 26px; 
 
\t font-weight: bold; 
 
\t color: white; 
 
\t text-align: center; 
 
\t background-color: rgb(66, 139, 202); 
 
} 
 

 
.postHead { 
 
\t width: 90%; 
 
\t position: fixed; 
 
\t left: 30%; 
 
\t margin-left: -24%; 
 
\t z-index: 1000; 
 
\t padding: 5px; 
 
\t font-family: Verdana, Geneva, sans-serif; 
 
\t color: #333333; 
 
\t font-size: 0.9em; 
 
} 
 

 
.panelBodyFloat { 
 
\t height: 100px; 
 
\t width: 100%; 
 
\t border: 1px solid rgb(204, 204, 204); 
 
\t align-content: center; 
 
\t overflow: auto; 
 
} 
 

 
.instruction { 
 
\t width: 90%; 
 
\t left: 30%; 
 
\t margin-left: -24%; 
 
\t position: relative; 
 
\t z-index: -1; 
 
\t margin-bottom: 15px; 
 
\t margin-top: 200px; 
 
\t padding: 10px; 
 
\t font-family: Verdana, Geneva, sans-serif; 
 
\t color: #333333; 
 
\t font-size: 0.9em; 
 
} 
 

 
h4.surveyHeader { 
 
\t font-family: Georgia, Garamond, serif; 
 
\t font-size: 16px; 
 
\t line-height: 26px; 
 
\t font-weight: bold; 
 
\t color: white; 
 
\t text-align: center; 
 
\t background-color: rgb(66, 139, 202); 
 
} 
 
</style> 
 
<!-- Bootstrap v3.0.3 --> 
 
<link href="https://s3.amazonaws.com/mturk-public/bs30/css/bootstrap.min.css" rel="stylesheet" /> 
 
<p>&nbsp;</p> 
 

 
<section class="postHead" id="GSKSurvey" style="align-content: center;"> 
 
<div class="panel panel-primary"> 
 
<div class="panel-heading"><b>Post</b></div> 
 

 
<div class="panelBodyFloat"> 
 
<p>mewilling I agree, mewilling. I would love to have a doctor or researcher post on our website. Maybe [FirstName] could work on this. pj</p> 
 
</div> 
 
</div> 
 
</section> 
 
<!-- Instructions --> 
 

 
<p>&nbsp;</p> 
 

 
<p>&nbsp;</p> 
 

 
<p>&nbsp;</p> 
 

 
<p>&nbsp;</p> 
 

 
<p>&nbsp;</p> 
 

 
<p>&nbsp;</p> 
 

 
<p>&nbsp;</p> 
 

 
<p>&nbsp;</p> 
 

 
<section class="container" id="Survey"> 
 
<div class="row col-xs-12 col-md-12"> 
 
<div class="panel panel-primary"> 
 
<div class="panel-heading surveyLabel"><b>Instructions</b></div> 
 

 
<div class="panel-body"> 
 
<p>Please answer the following questions based on the post shown. Each post should take about 1-3 minutes.</p> 
 

 
<p><b>Please note:</b> Blank submissions, or not fully answering questions, will result in rejection of the HIT and the worker being blocked from future HITS. Thank you for your hard work and happy turking!</p> 
 

 
<p><b>Contact us:</b> [email protected]</p> 
 
</div> 
 
</div> 
 
</div> 
 
</section> 
 

 
<p>&nbsp;</p> 
 

 
<section class="container" id="SurveyContinue"> 
 
<div> 
 
<h4 class="surveyHeader">Questions</h4> 
 

 
<section> 
 
<fieldset> 
 
<p><strong>1. Does the post specifically mention COPD or Asthma in a medically relevant context?</strong></p> 
 

 
<p><b>COPD Definition:</b> Chronic obstructive pulmonary disease (COPD) is a lung disease characterized by chronic obstruction of lung airflow that interferes with normal breathing and is not fully reversible. If the post mentions COPD or asthma specifically, then answer "Yes", otherwise, answer "No".</p> 
 

 
<p><b>Answer this question, even if it is "No", otherwise your HIT will be rejected!</b></p> 
 

 
<p><select class="form-control" name="disease"><option value="-1">- Please Select -</option><option value="0">No</option><option value="1">Yes</option> </select></p> 
 
</fieldset> 
 

 
<fieldset> 
 
<p><strong>Are any of the following products mentioned?</strong></p> 
 

 
<p>2. Anoro<br /> 
 
<select class="form-control" name="anoro"><option selected="selected" value="0">No</option><option value="1">Yes</option> </select></p> 
 

 
<p>3. Breo<br /> 
 
<select class="form-control" name="breo"><option selected="selected" value="0">No</option><option value="1">Yes</option> </select></p> 
 

 
<p>4. Incruse<br /> 
 
<select class="form-control" name="incruse"><option selected="selected" value="0">No</option><option value="1">Yes</option> </select></p> 
 

 
<p>5. Advair<br /> 
 
<select class="form-control" name="advair"><option selected="selected" value="0">No</option><option value="1">Yes</option> </select></p> 
 
</fieldset> 
 

 
<hr /> 
 
<h3>If <i><u>all the answers</u></i> for questions 1-5 were NO, please skip the remaining questions, go to the bottom of the page and click submit. Otherwise, please answer the remaining questions fully before submitting.</h3> 
 

 
<hr /> 
 
<fieldset> 
 
<p><strong>6. Who is speaking in the post? </strong></p> 
 

 
<p><select class="form-control" name="poster_type"><option selected="selected" value="Unknown">Unknown</option><option value="Patient">Patient</option><option value="HCP">Health care provider (HCP)</option><option value="Friend_Family">Friend or Family Member</option> </select></p> 
 

 
<p><b>HCP Definition:</b> An HCP includes doctors, nurses, pharmacists and other professional health care providers.</p> 
 
</fieldset> 
 

 
<hr /> 
 
<fieldset> 
 
<p><strong>7. If the patient is speaking, are they talking about their own experience in the post? </strong></p> 
 

 
<p><b>Hint:</b> Yes if poster talks about own health state, not about a third person or another patient. No if poster is talking about someone other than themselves or unknown.</p> 
 

 
<p><select class="form-control" name="patient_exp"><option selected="selected" value="-1">- Please Select -</option><option value="0">No</option><option value="1">Yes</option> </select></p> 
 
</fieldset> 
 

 
<hr /> 
 
<fieldset> 
 
<p><strong>8. Is the patient CURRENTLY being treated using Anoro, Breo, Incruse or Advair? </strong></p> 
 

 
<p><select class="form-control" name="current_tx"><option selected="selected" value="-1">- Please Select -</option><option value="No">No or Unknown</option><option value="Asthma">Yes, Asthma</option><option value="COPD">Yes, COPD</option><option value="Other">Yes, Other/Unspecified</option> </select></p> 
 
</fieldset> 
 

 
<hr /> 
 
<fieldset> 
 
<p><strong>9. Does the post mention sentiment regarding CURRENT treatment with Anoro, Breo, Incruse or Advair? </strong></p> 
 

 
<p><b>Sentiment:</b> Sentiment: Does the post reflect positive, negative or neutral feedback about being treated with Anoro, Breo, Incruse or Advair? If you are unsure about the category for sentiment, select neutral. If there is no sentiment expressed, select neutral</p> 
 

 
<p><select class="form-control" name="current_tx_sentiment"><option selected="selected" value="-1">- Please Select -</option><option value="Positive">Positive</option><option value="Negative">Negative</option><option value="Neutral">Neutral</option><option value="Both">Both Positive and Negative</option> </select></p> 
 
</fieldset> 
 

 
<hr /> 
 
<fieldset> 
 
<p><strong>10. Is the patient anticipating FUTURE treatment using Anoro, Breo, Incruse or Advair? </strong></p> 
 

 
<p><select class="form-control" name="future_tx"><option selected="selected" value="-1">- Please Select -</option><option value="No">No or Unknown</option><option value="Asthma">Yes, Asthma</option><option value="COPD">Yes, COPD</option><option value="Other">Yes, Other/Unspecified</option> </select></p> 
 
</fieldset> 
 

 
<hr /> 
 
<fieldset> 
 
<p><strong>11. Does the post mention sentiment regarding future treatment with Anoro, Breo, Incruse or Advair? </strong></p> 
 

 
<p><b>Sentiment:</b> Sentiment: Does the post reflect positive, negative or neutral feedback about anticipated treatment with Anoro, Breo, Incruse or Advair? If you are unsure about the category for sentiment, select neutral. If there is no sentiment expressed, select neutral.</p> 
 

 
<p><select class="form-control" name="future_tx_sentiment"><option selected="selected" value="-1">- Please Select -</option><option value="Positive">Positive</option><option value="Negative">Negative</option><option value="Neutral">Neutral</option><option value="Both">Both Positive and Negative</option> </select></p> 
 
</fieldset> 
 

 
<hr /> 
 
<fieldset> 
 
<p><strong>12. Is there any sentiment expressed about any topic? </strong></p> 
 

 
<p><b>Sentiment:</b> Do not duplicate responses in this question if another question has captured the sentiment. Does the post reflect positive, negative or neutral feedback about any topic? If you are unsure about the category for sentiment, select neutral. If there is no sentiment expressed, select neutral</p> 
 

 
<p><select class="form-control" name="post_sentiment"><option selected="selected" value="-1">- Please Select -</option><option value="Positive">Positive</option><option value="Negative">Negative</option><option value="Neutral">Neutral</option><option value="Both">Both Positive and Negative</option> </select></p> 
 
</fieldset> 
 

 
<hr /></section> 
 
</div> 
 
</section> 
 

 
<p>&nbsp;</p> 
 

 
<p>&nbsp;</p> 
 

 
<p>&nbsp;</p> 
 

 
<p>&nbsp;</p> 
 

 
<p>&nbsp;</p> 
 
<p class="text-center"><input type="submit" id="submitButton" class="btn btn-primary" value="Submit" /></p></form><script language="Javascript">turkSetAssignmentID();</script></body></html>

回答

0

代碼和解釋如下

所以,代碼說,每當病情下拉改變 如果其選定的值爲「1」
將poster_type下拉列表更改爲Patient。 將patient_exp下拉列表更改爲「1」 其他 將poster_type下拉列表更改爲Unknown。 改變patient_exp下拉爲「0」

$("select[name='disease']").change(function(){ 
     if($("select[name='disease']").val() == "1"){ 
      $("select[name='poster_type']").val("Patient"); 
      $("select[name='patient_exp']").val("1"); 
     } 
     else 
     { 
      $("select[name='poster_type']").val("Unknown"); 
      $("select[name='patient_exp']").val("0"); 
     } 
    }); 

對於poster_type下拉,的值變化 如果在poster_type電流選定值是patient_exp下拉的病人 設定值「1」 patient_exp的 別的 設定值下拉到「0」

$("select[name='poster_type']").change(function(){ 

     if($("select[name='poster_type']").val() == "Patient") 
      { 
      $("select[name='patient_exp']").val("1"); 
      } 
      else 
      { 
      $("select[name='patient_exp']").val("0"); 
      } 
     }); 
+0

謝謝!這正是我想要做的。我很感激幫助。 –

0

基本上你需要綁定到更改事件:

$('select[name=disease]').on('change', function(e){ 
    // here the user have changed the value 
}); 

然後你可以用VAL()獲取當前值:

$('select[name=disease]').val(); 
// yes or no 

瓦爾是還有您用來更改輸入值的方法:

$('input[name=myInput]').val('newVal'); 

所以,你正在尋找的東西是這樣的:

$('select[name=disease]').on('change', function(e){ 
    if($('select[name=disease]').val() === 'yes'){ 
     $('input[name=myInput]').val('my-new-value'); 
    } 
}); 
+0

感謝您瀏覽更改代碼。它有很大幫助! :) –